В рубрике «Развитие» публикуем интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, поделился взглядами на обучение и развитие программистов.
Содержание
О себе и своём обучении
Дмитрий Дементий: Андрей, расскажите пожалуйста о себе: кто вы, чем занимаетесь, где работаете?
Андрей Романов: Меня зовут Андрей Романов, мне 21 год. Я фронтенд-разработчик из Омска, переехал в Москву в 2016 году после окончания Школы разработки интерфейсов Яндекса. Работаю в Joom в команде службы поддержки. Развиваю сайд-проекты: For Web (новости фронтенда) и frontend case studies (коллекция материалов об опыте разработки интерфейсов в реальных компаниях).
Д.Д.: Где вы обучались разработке?
А.Р.: У меня нет формального образования. Единственные очные курсы, которые я окончил — это вышеупомянутая ШРИ Яндекса. В основном я учился всему самостоятельно: черпал теорию из статей и книг, делал учебные проекты, проходил онлайн-курсы на Coursera, HTML Academy, Code School (теперь уже Pluralsight) и Hexlet.
Д.Д.: Знаю, что учились в том числе у нас. Можете поделиться впечатлениями, мнением о Хекслете?
А.Р.: Проблема многих книг и курсов (в том числе вузовских) в том, что они учат конкретным технологиям и языкам программирования: в них обычно рассказывают о синтаксисе языка и стандартной библиотеке, но не рассказывают, как проектировать и писать хорошие и поддерживаемые программы.
Курсы Хекслета в этом плане выгодно отличаются от других, потому что они учат не синтаксическим конструкциям конкретного языка, а фундаментальным принципам программирования. Плюс сам формат обучения мне нравится: изучаешь порцию теории и сразу закрепляешь её практикой, часто нетривиальной и заставляющей размять мозги.
О сообществе For Web
Д.Д.: Ваш проект For Web — одно из самых популярных в рунете сообществ, посвященных фронтенду и программированию в целом. Расскажите о нём пожалуйста. Как создавалось, как развивалось, как функционирует сейчас?
А.Р.: В начале 2014 года я решил сохранять где-нибудь ссылки на найденные полезные статьи и инструменты, и завёл для этого страницу во «ВКонтакте». В какой-то момент понял, что это может быть интересно другим людям, запустил таргетированную рекламу и набрал первые несколько сотен подписчиков.
Затем был долгий период роста и экспериментов: я привлекал аудиторию, обмениваясь публикациями с сообществами смежной тематики, пробовал новые форматы вроде интервью, вопросов от подписчиков или коротких советов, перерисовывал логотип (текущая версия — третья, а так выглядели первая и вторая), пытался привлекать соавторов (в итоге я занимаюсь проектом в одиночку).
Сейчас формат устоялся, и аудитория, кажется, достигла некоторого потолка, хоть рост и продолжается. На сегодня For Web — это лента полезных материалов в ВК, Твиттере и Телеграмме, а также регулярный дайджест новостей фронтенда для тех, кто не хочет тратить время и внимание на соцсети.
Д.Д.: В паблике вы курируете контент: публикуете интересные посты. Кто их подбирает? По каким критериям выбираете, что публиковать, а что нет?
А.Р.: Я слежу за множеством RSS-лент и email-рассылок. Если встречаю потенциально интересный материал, откладываю его в специальную очередь, которую затем фильтрую тщательнее, вникая в суть материала.
За время существования сообщества критерии сильно изменились. Сейчас я стараюсь публиковать как можно более долговечные и полезные широкому кругу подписчиков материалы (то есть статьи о хайповых фреймворках и библиотеках сразу отпадают). Отдельные жемчужины, которые я очень люблю — статьи из блогов компаний, рассказывающие о решении реальных рабочих задач. Я не публикую пиратские материалы. Я не ограничиваюсь материалами о фронтенде: парадигмы программирования, архитектура, софтскилы, дизайн и UX — всё это тоже полезно фронтендерам.
Д.Д.: Есть ли в сообществе модерация? Если участники начинают вести себя некорректно, что происходит?
А.Р.: Обычно я руководствуюсь здравым смыслом и удаляю очевидный спам. Раньше я пытался заставить подписчиков следовать определённым правилам поведения (например, писать конструктивные комментарии вместо бесполезных в духе «ерунда какая-то») и карал за их нарушения, но в какой-то момент я понял, что правила всё равно никто не читает, а людей не перевоспитать, и перестал за этим следить. Бывает, что дискуссии разгораются и участники начинают друг друга оскорблять; я не хочу вводить цензуру, поэтому обычно не вмешиваюсь.
О фронтенде
Д.Д.: Вы фронтенд-разработчик, ваш проект For Web преимущественно посвящен фронтенду. Почему выбрали это направление?
А.Р.: Так получилось, что свой путь я начинал с книги по HTML, изучал вёрстку и параллельно пробовал разные языки программирования. Материалы по программированию, с которых я начинал, были довольно посредственные, и результатов с вёрсткой я добился гораздо быстрее. В основном это и повлияло на выбор направления: фронтенд позволяет очень быстро сделать что-то рабочее и осязаемое, а бэкенд на тот момент был мне непонятен и чужд.
Д.Д.: Как вы считаете, перспективно ли в данный момент обучаться фронтенд-разработке? Способствует ли этому ситуация на рынке труда? Или может быть есть более перспективные направления?
А.Р.: Открыл сейчас поиск hh.ru по Москве, там 1472 вакансии по запросу frontend и 1391 вакансия по запросу backend. Учитывая фрагментированность бэкенда (Python-программистов не всегда готовы нанимать на Java или Go), фронтенд кажется востребованнее. С другой стороны, бэкендеры имеют лучшие карьерные перспективы: я не знаю примеров, когда в техдиректоры вырастали бы из фронтенда.
В вебе появляется всё больше средств для разработки сложных приложений (PWA, WebAssembly, браузерные API для доступа к железу), и это тоже влияет на востребованность фронтендеров: многие компании делают веб-приложения, чтобы сэкономить на разработке нативных приложений под каждую платформу.
Д.Д.: Как вы думаете, чистые верстальщики без знаний программирования конкурентоспособны на рынке труда? Или на вёрстке останавливаться нельзя, надо развиваться и учиться программированию?
А.Р.: На западе в принципе нет такого понятия как «верстальщик» — там верстают либо дизайнеры, либо программисты. Да и в России практически нет вакансий именно про вёрстку, обычно ищут фронтенд-разработчиков, которые должны уметь и сверстать интерфейс, и запрограммировать его. Думаю, ситуация на рынке говорит сама за себя.
Д.Д.: С вашей точки зрения у JavaScript-разработчиков есть светлое будущее? В обозримой перспективе нет ли каких-то технологий или языков, которые заменят JS-программистов? (WebAssembly и так далее). Может уже сразу надо учиться чему-то другому?
А.Р.: В обозримой перспективе HTML/CSS/JavaScript из браузеров никуда не денутся. Чтобы не упустить светлое будущее, не нужно позиционировать себя как React-разработчик или JavaScript-разработчик. Учитесь фундаментальным вещам, а не модным фреймворкам, и тогда ваши знания не будут быстро устаревать.
Д.Д.: Сейчас на коне React, популярен Vue, Angular вроде бы сдаёт позиции, но всё равно востребован. Через несколько лет фронтендеры будут пользоваться этими инструментами или появятся новые фреймворки и библиотеки?
А.Р.: Учитывая то, с какой скоростью развивается фронтенд, появление новых фреймворков исключить сложно. Но в любом случае останется множество написанных сейчас проектов, которые переписывать будет нецелесообразно, так что нынешние фреймворки не исчезнут совсем.
Д.Д.: В целом, куда идёт фронтенд-разработка? Есть какие-то выраженные тенденции, которые серьёзно изменят рынок, подходы к работе, ситуацию в сфере занятости фронтендеров в ближайшей перспективе?
А.Р.: Я наблюдаю развитие веб-платформы в сторону полноценных приложений. Пока что веб скорее догоняет мобильную разработку по возможностям и подходам, но у веба есть важное преимущество — кроссплатформенность. Могу выделить несколько перспективных направлений, технологий и подходов.
PWA — приложения, обеспечивающие близкий к нативному UX, работу в офлайне, установку приложения на мобильный или десктоп. Реализуются с помощью набора специальных API вроде сервис-воркеров.
WebAssembly — технология, позволяющая запускать в вебе ресурсоёмкие приложения, написанные на языках вроде C/C++/Rust. Несмотря на молодость технологии, её уже используют продукты вроде Unity, Figma и eBay.
CSS Houdini позволит расширять CSS за счёт доступа к механизму отрисовки страницы браузером. Например, это позволит писать полифилы для новых возможностей CSS и не ждать их реализации разработчиками браузеров.
Только-только зарождающаяся идея, заимствованная из мобильной разработки — вынос в отдельные треды всех вычислений, не связанных с отрисовкой интерфейса, чтобы не блокировать ими этот самый интерфейс.
Ещё одна интересная идея — переход от фреймворков с тяжёлым рантаймом к фреймворкам, компилируемым в минимально необходимый для работы приложения код. Пионер в этой сфере — Svelte.
Современные браузеры поддерживают последние стандарты и API (вплоть до ES-модулей), что позволяет отказаться от инструментов сборки и транспиляции кода вроде webpack и babel, тем самым сильно сократив объём кода, который браузеру нужно скачать, распарсить и выполнить. Пока не все браузеры поддерживают последние стандарты, можно реализовать раздельную раздачу кода: старым браузерам отдавать собранную и транспилированную версию приложения, а современным — облегчённую.
Д.Д.: Сейчас на слуху технология PWA. Прогрессивные веб-приложения активно популяризирует Google. Есть фреймворки типа Gatsby, которые генерируют сайты с характеристиками PWA. Эта технология откусит долю рынка у нативных приложений?
А.Р.: Да, PWA уже разработали и запустили многие крупные компании вроде Uber, Pinterest, Tinder, Twitter. Многие компании пока ещё стремятся чуть ли не принудительно перетягивать мобильных пользователей из веба в нативные приложения, но я думаю, что через несколько лет это изменится, когда бизнес поймёт ценность и возможности мобильного веба.
Доносить ценность и возможности до бизнеса должны как раз фронтендеры: когда я работал в Авито, мой коллега хорошо обосновал и продал бизнесу идею перезапуска мобильной версии сайта, взялся за реализацию и довёл её до конечного продукта. Благодаря нему у Авито теперь более удобная и современная мобильная версия, близкая к нативным приложениям по функциональности и дизайну.
Д.Д.: Как вы относитесь с CSS-фреймворкам? Это полезные инструменты? Можно ли их использовать в продакшене с вашей точки зрения?
А.Р.: На мой взгляд, они полезны либо тогда, когда команда с ними хорошо знакома и они действительно помогают ей быстрее доставлять ценность бизнесу, либо когда стоит задача быстро набросать прототип интерфейса не по дизайн-макету. В остальных случаях они доставят больше головной боли, чем пользы. Самый популярный фреймворк Bootstrap полон CSS-антипаттернов вроде глобальных стилей и вложенных селекторов, что делает болью поддержку интерфейсов, использующих его. Алексей Иванов в блоге «Злых марсиан» разбирал проблемы Бутстрапа.
Об обучении и карьере программистов
Д.Д.: Как вы думаете, что должен знать и уметь новичок, чтобы претендовать на позицию джуниор-фронтендера? Можно прямо список технологий и умений.
А.Р.: В первую очередь нужно крепко знать HTML, CSS и основы JavaScript. Сейчас многие кидаются изучать фреймворки, пропуская основы. Так делать не нужно. HTML/CSS/JS вы изучаете один раз и надолго, они составляют фундамент, без которого будет сложно решать реальные задачи. Фреймворки меняются, и по опыту собеседования в крупные компании вроде Яндекса, Авито или Тинькова могу сказать, что знание фреймворков обычно не так важно, как знание базовых веб-технологий.
Конечно, мало просто знать теорию. Нужно уметь применять её. Я бы ждал от джуниора умения семантично и адаптивно верстать, умения запрограммировать несложный интерфейс. Проверить эти умения можно на каком-нибудь простом примере вроде виджета конвертации валют.
Д.Д.: Опишите, пожалуйста, идеальную систему подготовки фронтенд-разработчика. Иными словами, как абсолютному новичку прямо сейчас, в 2019 году, научиться разработке и стать востребованным на рынке труда специалистом? Куда идти, что читать, что покупать, что делать?
А.Р.: Я бы порекомендовал взяться за курсы HTML Academy, чтобы научиться основам вёрстки, и параллельно взяться за курсы Хекслета, чтобы заложить фундамент в программировании. JavaScript и браузерные API рекомендую изучать на learn.javascript.ru. Эти три ресурса содержат большинство необходимой теории, закрепляемой практическими заданиями.
Как только сможете написать виджет обмена валют, рекомендую идти на собеседования в реальные компании, чтобы сразу обнаружить пробелы в знаниях (или же удачно получить офер). Также новичкам будет полезно пройти ШРИ Яндекса: даже если вы не собираетесь в Яндекс, это прокачает ваши навыки фронтенда и даст опыт работы в команде, а ещё даст кучу полезных знакомств.
Д.Д.: Где можно прокачиваться новичкам, чтобы отработать полученные на курсах знания и умения и предъявлять работодателю реальный опыт, реальный код?
А.Р.: Прежде всего нужно завести профиль на ГитХабе или ГитЛабе, чтобы было куда выкладывать код. Рекомендую поискать или попросить у компаний тестовые задания. Если найти тестовые задания не получится, можно придумать их самому или погуглить app ideas list.
У «Злых марсиан» есть крутая инициатива Cult of Martians: они публикуют задачи по реальным опенсорс-проектам, можно выбрать любую, сделать её и получить в портфолио строчку о вкладе в опенсорс.
Примечание редактора: «Хекслет» подготовил репозиторий с тестовыми заданиями от известных компаний. Также у нас есть opensource-проект Codebattle, в котором может поучаствовать каждый желающий разработчик с любым уровнем подготовки.
Д.Д.: Как вы считаете, сколько нужно среднестатистическому человеку времени, чтобы изучить фронтенд-разработку и претендовать на позицию джуниора? Здесь без учёта индивидуальных особенностей, грубое среднее значение.
А.Р.: Если учиться фултайм, думаю, хватит от 6 до 9 месяцев, чтобы заложить качественный фундамент и устроиться на работу. Если срезать углы и идти на поводу у рынка (изучать сиюминутно популярные фреймворки вперёд основ), можно и быстрее устроиться, наверное.
Д.Д.: По вашему мнению, каждый ли может научиться разработке, или эта сфера для избранных? Какими качествами должен обладать человек, чтобы стать успешным разработчиком?
А.Р.: Промышленная разработка — точно не сфера для избранных. Это ремесло, которому должны учить скорее в ПТУ, чем в вузах. Сложно выделить какие-то определённые качества. Я бы сказал, что в первую очередь нужен интерес. Если человеку интересна разработка, у него всё получится.
Д.Д.: Обучение программированию связано с трудностями и необходимостью дисциплинированно работать. Вы наверняка тоже сталкивались с трудностями и барьерами. Как их преодолевали? Можете что-то посоветовать новичкам? Что делать, когда опускаются руки?
А.Р.: Мне кажется, любое обучение связано с трудностями и требует дисциплины. Как я уже сказал, в первую очередь помогает искренний интерес; лично мне очень сложно заниматься чем-то, что мне не интересно. Могу посоветовать курс Learning How to Learn, в котором как раз рассказывают, как эффективнее учиться и справляться с прокрастинацией.
Д.Д.: Куда человеку лучше идти работать после получения диплома или сертификата? Это должна быть крупная компания, или можно выбрать небольшую студию, фриланс? К чему стремиться, чтобы стать хорошим специалистом и хорошо зарабатывать?
А.Р.: Надёжнее начинать со средней или крупной компании: выше вероятность, что в ней уже налажены процессы и выстроена инженерная культура. Но в первую очередь важны люди, с которыми вы будете работать: работу вы будете делать везде примерно одинаковую, а крутые и опытные коллеги могут сильно ускорить ваш профессиональный рост.
Я работал только в продуктовых компаниях и с аутсорсом не сталкивался, но исходя из рассказов знакомых, я бы не советовал идти в аутсорс.
Чтобы стать хорошим специалистом и хорошо зарабатывать, нужно прокачивать не только технические навыки, но и софт-скиллы (психология, коммуникация, решение конфликтов и вот это всё). Важно помнить, что вам платят в первую очередь не за красоту кода, а за решение задач бизнеса.
Д.Д.: В Хекслет часто приходят в зрелом возрасте (30+). Есть кейсы, когда человек получает новую профессию и находит работу джуном в 30+ и даже в 40+ лет. По вашему опыту, есть ли проблема возраста (эйджизм) в сфере разработки? Стоит ли учиться в 30+, или эта отрасль для тех, кому 18?
А.Р.: Мне сложно оценить ситуацию в отрасли, потому что я слишком молодой. По моему опыту, работодателям важно, чтобы специалист хорошо справлялся со своими задачами и чтобы у него была понятная мотивация. Я наблюдал такое проявление эйджизма: работодатель охотнее нанимал молодых кандидатов из-за того, что они чаще увлечены разработкой и горят ей, а не относятся к ней как к обычной работе. Но такое чаще встречается в стартапах, и я думаю, что зрелые кандидаты сами будут рады избежать таких работодателей.
Д.Д.: Насколько, по вашему мнению, важны для разработчика софт-скилы? Какими софт-скилами должен обладать хороший специалист?
А.Р.: Как я уже говорил, софтскилы важны. Любому разработчику приходится взаимодействовать с людьми, будь то заказчики, менеджеры, дизайнеры или другие программисты. В основном нужно уметь вести переговоры, доносить и отстаивать свою точку зрения. Нужно уметь говорить руководству «нет». Нужно уметь открыто обсуждать проблемы и признавать ошибки.
Рекомендую подкаст Soft Skills Engineering о развитии софтскилов для инженеров.
Д.Д.: Разработчику приходится учиться всю жизнь. Как вы считаете, хороший специалист должен копать вглубь или вширь? Например, фронтендеру лучше прокачиваться в своём направлении, углубляться в технологии, изучать фреймворки, библиотеки? Или лучше расширять кругозор, знакомиться с бэкендом, учить серверные языки?
А.Р.: Нужно прокачиваться и вширь, и вглубь. В начале пути нужно будет копать вглубь, чтобы овладеть азами, а затем можно начинать прокачиваться вширь. Стоит изучить основы дизайна, потому что фронтендерам тоже нужно принимать решения за дизайнера (например, когда тот не продумал некоторые состояния интерфейса). Понимание серверной разработки будет полезно для общения с бэкендерами и проектирования API. Стоит прокачаться в тестировании, управлении проектами, психологии. Ну и, конечно, полезным будет понимание предметной области продукта, который вы разрабатываете.
Д.Д.: Дайте, пожалуйста, совет читателям Хекслета. Как эффективно обучаться, как стать хорошим специалистом?
А.Р.: Для эффективного обучения я уже посоветовал курс Learning How to Learn. От себя могу добавить, что залог эффективного обучения и успеха в работе — интерес к тому, чем занимаешься. Остальное приложится!
Д.Д.: Спасибо за интересные ответы!
А.Р.: Успехов читателям!
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="ru" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<link href="https://mc.yandex.ru" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26 20:28:12 UTC","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="MgRHyA-vjjYomeiGTa_cncMBBM0MqkYCzFdCxVwA3JHd1Yz__dEjVp7azB5BoCzqAwgpZwSduKBxt9iRDgc7_w";gon.locale="ru";gon.language="ru";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLSeibfGq-KvWQ2Fyru-zkFFRVTLBuzXAHAoEyN1p49FtDmNoNA";
//]]>
</script>
<meta charset="utf-8">
<title>Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда</title>
<meta name="description" content="В рубрике «Развитие» предлагаем вам интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, своих взглядах на обучение программистов и развитие разработчиков.">
<link rel="canonical" href="https://ru.hexlet.io/blog/posts/osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda">
<meta property="og:title" content="Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда">
<meta property="og:description" content="В рубрике «Развитие» предлагаем вам интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, своих взглядах на обучение программистов и развитие разработчиков.">
<meta property="og:image" content="https://ru.hexlet.io/vite/assets/blog_post-7eTyeLLt.webp">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="CyMgi3p0RO14CdcVRapiN3kcAcjZ_X-ikP8a7XG0tubk8uu8iArpjc5K841JpZJAuRUsYtHKgQAtH4C5I7NRiA" />
<script src="/vite/assets/inertia-DfXos102.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-BJ4cLWpC.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-BrRXra1y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-DrlRQ-1D.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-cb8xch9l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DL2bpZA-.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/extends-C-EagtpE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/inheritsLoose-BBd-DCVI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/objectWithoutPropertiesLoose-DRHXDhjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DAqKOkZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Button-CGPUux8l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/CloseButton-D1euiPao.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Group-BX48WcuU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Loader-BQEY8g6v.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-Cy3HByv7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/OptionalPortal-1Hza5P2w.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Stack-CtjJzfw4.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-Ck64llAy.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/DirectionProvider-Dc9zdUke.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/events-DJQOhap0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-reduced-motion-D2owz4wa.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-disclosure-zKtK5W1r.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-hotkeys-Cnc_Rwkb.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/random-id-DOQyszCZ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-C_MrNx_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BqhCP46M.js" />
<script src="/vite/assets/application-Df9RExpe.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-VMNbxKGl.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-C3aM9r1M.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-D1-O8zkX.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-C8HjmMaq.css" media="screen" />
<script>
window.ym = function(){(ym.a=ym.a||[]).push(arguments)};
window.addEventListener('load', function() {
setTimeout(function() {
ym.l = 1*new Date();
ym(window.gon.ym_counter, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
// Загружаем скрипт
var k = document.createElement('script');
k.async = 1;
k.src = 'https://mc.yandex.ru/metrika/tag.js';
document.head.appendChild(k);
ym(window.gon.ym_counter, 'getClientID', function(clientID) {
window.ymClientId = clientID;
});
}, 1500);
});
</script>
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<noscript>
<div>
<img alt="" src="https://mc.yandex.ru/watch/25559621" style="position:absolute; left:-9999px;">
</div>
</noscript>
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Логотип Хекслета" height="24" src="https://ru.hexlet.io/vite/assets/logo_ru_light-BpiEA1LT.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Меню" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
Все курсы
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Все что есть</div>
<div class="text-muted">117</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные категории</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">Курсы по DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_data_analytics">Курсы по аналитике данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_programming">Курсы по программированию
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Курсы по тестированию
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные курсы</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/go">Go-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/java">Java-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/python">Python-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/qa-auto-engineer-java">Автоматизатор тестирования на Java
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/data-analytics">Аналитик данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Фронтенд-разработчик
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
О Хекслете
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">О нас
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Блог
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button">Результаты (Исследование)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button">Хекслет Карьера
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Отзывы студентов
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button">Поддержка (В ТГ)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button">Реферальная программа
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button">Подарочные сертификаты
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button">Вакансии
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button">Компаниям
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button">Колледж
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button">Частная школа
</span></li>
</ul>
</li>
<li><a class="nav-link" href="/subscription/new">Подписка</a></li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Переключить тему" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Регистрация</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://ru.hexlet.io/session/new" role="button"><span>Вход</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="/vite/assets/blog_post-7eTyeLLt.webp"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--ae9eed98663dd1201759d042a5ba7ca790866156/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-bro.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><div id="app" data-page="{"component":"web/blog/posts/show","props":{"errors":{},"locale":"ru","language":"ru","httpsHost":"https://ru.hexlet.io","host":"ru.hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26T20:28:12.637Z","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":"88d071f1d3384eb4bd1deb37910235c7","formAuthToken":"x-o7hg_18Y-d4idW68XLg3vfFzHTSgOxwSM5O9RB2BAoO_Cx_Ytc7yuhA87nyjv0u9Y6m9t9_RN8w6NvhkY_fg","post":{"model_name":"BlogPost","category":{"id":6,"name":"Мотивация","slug":"motivation","state":"published","created_at":"2016-10-06T18:31:38.903Z"},"creator":{"public_name":"Дмитрий Дементий","id":174372,"is_tutor":false},"tags":[{"id":1443,"slug":"frontend","name":"Фронтенд"}],"id":443,"title":"Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда","slug":"osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda","state":"published","summary":"В рубрике «Развитие» предлагаем вам интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, своих взглядах на обучение программистов и развитие разработчиков. ","votes_count":17,"created_at":"2019-08-19T15:15:55.132Z","published_at":"2019-08-20T08:07:21.200Z","body":"В рубрике «Развитие» публикуем интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, поделился взглядами на обучение и развитие программистов. \n\n## Содержание\n\n## О себе и своём обучении\n\n_Дмитрий Дементий: Андрей, расскажите пожалуйста о себе: кто вы, чем занимаетесь, где работаете?_ \n \nАндрей Романов: Меня зовут Андрей Романов, мне 21 год. Я фронтенд-разработчик из Омска, переехал в Москву в 2016 году после окончания Школы разработки интерфейсов Яндекса. Работаю в [Joom](https://www.joom.com) в команде службы поддержки. Развиваю сайд-проекты: [For Web](https://forwebdev.ru) (новости фронтенда) и [frontend case studies](https://github.com/andrew--r/frontend-case-studies) (коллекция материалов об опыте разработки интерфейсов в реальных компаниях). \n\n\n_Д.Д.: Где вы обучались разработке?_ \n \nА.Р.: У меня нет формального образования. Единственные очные курсы, которые я окончил — это вышеупомянутая ШРИ Яндекса. В основном я учился всему самостоятельно: черпал теорию из статей и книг, делал учебные проекты, проходил онлайн-курсы на [Coursera](https://www.coursera.org), [HTML Academy](https://htmlacademy.ru), Code School (теперь уже [Pluralsight](https://www.pluralsight.com)) и [Hexlet](https://hexlet.io). \n\n::programs\n\n_Д.Д.: Знаю, что учились в том числе у нас. Можете поделиться впечатлениями, мнением о Хекслете?_ \n \nА.Р.: Проблема многих книг и курсов (в том числе вузовских) в том, что они учат конкретным технологиям и языкам программирования: в них обычно рассказывают о синтаксисе языка и стандартной библиотеке, но не рассказывают, как проектировать и писать хорошие и поддерживаемые программы. \n \nКурсы Хекслета в этом плане выгодно отличаются от других, потому что они учат не синтаксическим конструкциям конкретного языка, а фундаментальным принципам программирования. Плюс сам формат обучения мне нравится: изучаешь порцию теории и сразу закрепляешь её практикой, часто нетривиальной и заставляющей размять мозги.\n\n## О сообществе For Web\n\n_Д.Д.: Ваш проект [For Web](https://forwebdev.ru/) — одно из самых популярных в рунете сообществ, посвященных фронтенду и программированию в целом. Расскажите о нём пожалуйста. Как создавалось, как развивалось, как функционирует сейчас?_ \n \nА.Р.: В начале 2014 года я решил сохранять где-нибудь ссылки на найденные полезные статьи и инструменты, и завёл для этого страницу во «ВКонтакте». В какой-то момент понял, что это может быть интересно другим людям, запустил таргетированную рекламу и набрал первые несколько сотен подписчиков. \n \nЗатем был долгий период роста и экспериментов: я привлекал аудиторию, обмениваясь публикациями с сообществами смежной тематики, пробовал новые форматы вроде интервью, вопросов от подписчиков или коротких советов, перерисовывал логотип ([текущая версия](https://sun9-52.userapi.com/c627720/v627720511/37869/4f3rH9Q8kCk.jpg) — третья, а так выглядели [первая](https://pp.userapi.com/VrpoT1FLfAC_qnEnP5Y7IU5ogG59zYmgtvnumw/kpfbIeMp8Bo.jpg) и [вторая](https://pp.userapi.com/6ZyO1Q-dStgz45HB4s9Gm_SxI4GfI3OmVcVNmg/yohMzUA-vyk.jpg)), пытался привлекать соавторов (в итоге я занимаюсь проектом в одиночку). \n \nСейчас формат устоялся, и аудитория, кажется, достигла некоторого потолка, хоть рост и продолжается. На сегодня For Web — это лента полезных материалов в [ВК](https://vk.com/forwebdev), [Твиттере](https://twitter.com/forwebdev) и [Телеграмме](https://t.me/forwebdev), а также регулярный [дайджест новостей фронтенда](https://forwebdev.ru/digest/) для тех, кто не хочет тратить время и внимание на соцсети. \n\n_Д.Д.: В паблике вы курируете контент: публикуете интересные посты. Кто их подбирает? По каким критериям выбираете, что публиковать, а что нет?_ \n \nА.Р.: Я слежу за множеством RSS-лент и email-рассылок. Если встречаю потенциально интересный материал, откладываю его в специальную очередь, которую затем фильтрую тщательнее, вникая в суть материала. \n \nЗа время существования сообщества критерии сильно изменились. Сейчас я стараюсь публиковать как можно более долговечные и полезные широкому кругу подписчиков материалы (то есть статьи о хайповых фреймворках и библиотеках сразу отпадают). Отдельные жемчужины, которые я очень люблю — статьи из блогов компаний, рассказывающие о решении реальных рабочих задач. Я не публикую пиратские материалы. Я не ограничиваюсь материалами о фронтенде: парадигмы программирования, архитектура, софтскилы, дизайн и UX — всё это тоже полезно фронтендерам. \n\n\n_Д.Д.: Есть ли в сообществе модерация? Если участники начинают вести себя некорректно, что происходит?_ \n \nА.Р.: Обычно я руководствуюсь здравым смыслом и удаляю очевидный спам. Раньше я пытался заставить подписчиков следовать определённым правилам поведения (например, писать конструктивные комментарии вместо бесполезных в духе «ерунда какая-то») и карал за их нарушения, но в какой-то момент я понял, что правила всё равно никто не читает, а людей не перевоспитать, и перестал за этим следить. Бывает, что дискуссии разгораются и участники начинают друг друга оскорблять; я не хочу вводить цензуру, поэтому обычно не вмешиваюсь.\n\n\n## О фронтенде \n\n\n_Д.Д.: Вы фронтенд-разработчик, ваш проект [For Web](https://vk.com/forwebdev) преимущественно посвящен фронтенду. Почему выбрали это направление?_ \n \nА.Р.: Так получилось, что свой путь я начинал с книги по HTML, изучал вёрстку и параллельно пробовал разные языки программирования. Материалы по программированию, с которых я начинал, были довольно посредственные, и результатов с вёрсткой я добился гораздо быстрее. В основном это и повлияло на выбор направления: фронтенд позволяет очень быстро сделать что-то рабочее и осязаемое, а бэкенд на тот момент был мне непонятен и чужд. \n\n\n_Д.Д.: Как вы считаете, перспективно ли в данный момент обучаться фронтенд-разработке? Способствует ли этому ситуация на рынке труда? Или может быть есть более перспективные направления?_ \n \nА.Р.: Открыл сейчас поиск hh.ru по Москве, там 1472 вакансии по запросу frontend и 1391 вакансия по запросу backend. Учитывая фрагментированность бэкенда (Python-программистов не всегда готовы нанимать на Java или Go), фронтенд кажется востребованнее. С другой стороны, бэкендеры имеют лучшие карьерные перспективы: я не знаю примеров, когда в техдиректоры вырастали бы из фронтенда. \n \nВ вебе появляется всё больше средств для разработки сложных приложений (PWA, WebAssembly, браузерные API для доступа к железу), и это тоже влияет на востребованность фронтендеров: многие компании делают веб-приложения, чтобы сэкономить на разработке нативных приложений под каждую платформу. \n\n\n_Д.Д.: Как вы думаете, чистые верстальщики без знаний программирования конкурентоспособны на рынке труда? Или на вёрстке останавливаться нельзя, надо развиваться и учиться программированию?_ \n \nА.Р.: На западе в принципе нет такого понятия как «верстальщик» — там верстают либо дизайнеры, либо программисты. Да и в России практически нет вакансий именно про вёрстку, обычно ищут фронтенд-разработчиков, которые должны уметь и сверстать интерфейс, и запрограммировать его. Думаю, ситуация на рынке говорит сама за себя. \n\n\n_Д.Д.: С вашей точки зрения у JavaScript-разработчиков [есть светлое будущее](https://ru.hexlet.io/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov)? В обозримой перспективе нет ли каких-то технологий или языков, которые заменят JS-программистов? (WebAssembly и так далее). Может уже сразу надо учиться чему-то другому?_ \n \nА.Р.: В обозримой перспективе HTML/CSS/JavaScript из браузеров никуда не денутся. Чтобы не упустить светлое будущее, не нужно позиционировать себя как React-разработчик или JavaScript-разработчик. Учитесь фундаментальным вещам, а не модным фреймворкам, и тогда ваши знания не будут быстро устаревать. \n\n\n_Д.Д.: Сейчас на коне React, популярен Vue, Angular вроде бы сдаёт позиции, но всё равно востребован. Через несколько лет фронтендеры будут пользоваться этими инструментами или появятся новые фреймворки и библиотеки?_ \n \nА.Р.: Учитывая то, с какой скоростью развивается фронтенд, появление новых фреймворков исключить сложно. Но в любом случае останется множество написанных сейчас проектов, которые переписывать будет нецелесообразно, так что нынешние фреймворки не исчезнут совсем. \n\n_Д.Д.: В целом, куда идёт фронтенд-разработка? Есть какие-то выраженные тенденции, которые серьёзно изменят рынок, подходы к работе, ситуацию в сфере занятости фронтендеров в ближайшей перспективе?_ \n \nА.Р.: Я наблюдаю развитие веб-платформы в сторону полноценных приложений. Пока что веб скорее догоняет мобильную разработку по возможностям и подходам, но у веба есть важное преимущество — кроссплатформенность. Могу выделить несколько перспективных направлений, технологий и подходов. \n \nPWA — приложения, обеспечивающие близкий к нативному UX, работу в офлайне, установку приложения на мобильный или десктоп. Реализуются с помощью набора специальных API вроде сервис-воркеров. \n \nWebAssembly — технология, позволяющая запускать в вебе ресурсоёмкие приложения, написанные на языках вроде C/C++/Rust. Несмотря на молодость технологии, её уже используют продукты вроде [Unity](https://blogs.unity3d.com/2018/08/15/webassembly-is-here/), [Figma](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/) и [eBay](https://tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/). \n \nCSS Houdini позволит расширять CSS за счёт доступа к механизму отрисовки страницы браузером. Например, это позволит писать полифилы для новых возможностей CSS и не ждать их реализации разработчиками браузеров. \n \nТолько-только зарождающаяся идея, заимствованная из мобильной разработки — вынос в отдельные треды всех вычислений, не связанных с отрисовкой интерфейса, чтобы не блокировать ими этот самый интерфейс. \n \nЕщё одна интересная идея — переход от фреймворков с тяжёлым рантаймом к фреймворкам, компилируемым в минимально необходимый для работы приложения код. Пионер в этой сфере — [Svelte](https://svelte.dev/). \n \nСовременные браузеры поддерживают последние стандарты и API (вплоть до ES-модулей), что позволяет отказаться от инструментов сборки и транспиляции кода вроде webpack и babel, тем самым сильно сократив объём кода, который браузеру нужно скачать, распарсить и выполнить. Пока не все браузеры поддерживают последние стандарты, можно реализовать[ раздельную раздачу кода](https://jasonformat.com/modern-script-loading/): старым браузерам отдавать собранную и транспилированную версию приложения, а современным — облегчённую. \n\n\n_Д.Д.: Сейчас на слуху технология PWA. Прогрессивные веб-приложения активно популяризирует Google. Есть фреймворки типа Gatsby, которые генерируют сайты с характеристиками PWA. Эта технология откусит долю рынка у нативных приложений?_ \n \nА.Р.: Да, PWA уже разработали и запустили многие крупные компании вроде Uber, Pinterest, Tinder, Twitter. Многие компании пока ещё стремятся чуть ли не принудительно перетягивать мобильных пользователей из веба в нативные приложения, но я думаю, что через несколько лет это изменится, когда бизнес поймёт ценность и возможности мобильного веба. \n \nДоносить ценность и возможности до бизнеса должны как раз фронтендеры: когда я работал в Авито, мой коллега хорошо обосновал и продал бизнесу идею перезапуска мобильной версии сайта, взялся за реализацию и довёл её до конечного продукта. Благодаря нему у Авито теперь более удобная и современная мобильная версия, близкая к нативным приложениям по функциональности и дизайну. \n\n_Д.Д.: Как вы относитесь с CSS-фреймворкам? Это полезные инструменты? Можно ли их использовать в продакшене с вашей точки зрения?_ \n \nА.Р.: На мой взгляд, они полезны либо тогда, когда команда с ними хорошо знакома и они действительно помогают ей быстрее доставлять ценность бизнесу, либо когда стоит задача быстро набросать прототип интерфейса не по дизайн-макету. В остальных случаях они доставят больше головной боли, чем пользы. Самый популярный фреймворк Bootstrap полон CSS-антипаттернов вроде глобальных стилей и вложенных селекторов, что делает болью поддержку интерфейсов, использующих его. Алексей Иванов в блоге «Злых марсиан» разбирал [проблемы Бутстрапа](https://evilmartians.com/chronicles/bootstrap-an-intervention).\n\n\n## Об обучении и карьере программистов \n\n\n_Д.Д.: Как вы думаете, что должен знать и уметь новичок, чтобы претендовать на позицию джуниор-фронтендера? Можно прямо список технологий и умений._ \n \nА.Р.: В первую очередь нужно крепко знать HTML, CSS и основы JavaScript. Сейчас многие кидаются изучать фреймворки, пропуская основы. Так делать не нужно. HTML/CSS/JS вы изучаете один раз и надолго, они составляют фундамент, без которого будет сложно решать реальные задачи. Фреймворки меняются, и по опыту собеседования в крупные компании вроде Яндекса, Авито или Тинькова могу сказать, что знание фреймворков обычно не так важно, как знание базовых веб-технологий. \n \nКонечно, мало просто знать теорию. Нужно уметь применять её. Я бы ждал от джуниора умения семантично и адаптивно верстать, умения запрограммировать несложный интерфейс. Проверить эти умения можно на каком-нибудь простом примере вроде виджета конвертации валют. \n\n_Д.Д.: Опишите, пожалуйста, идеальную систему подготовки фронтенд-разработчика. Иными словами, как абсолютному новичку прямо сейчас, в 2019 году, научиться разработке и стать востребованным на рынке труда специалистом? Куда идти, что читать, что покупать, что делать?_ \n\nА.Р.: Я бы порекомендовал взяться за курсы HTML Academy, чтобы научиться основам вёрстки, и параллельно взяться за курсы Хекслета, чтобы заложить фундамент в программировании. JavaScript и браузерные API рекомендую изучать на [learn.javascript.ru](http://learn.javascript.ru/). Эти три ресурса содержат большинство необходимой теории, закрепляемой практическими заданиями. \n \nКак только сможете написать виджет обмена валют, рекомендую идти на собеседования в реальные компании, чтобы сразу обнаружить пробелы в знаниях (или же удачно получить офер). Также новичкам будет полезно пройти ШРИ Яндекса: даже если вы не собираетесь в Яндекс, это прокачает ваши навыки фронтенда и даст опыт работы в команде, а ещё даст кучу полезных знакомств. \n\n_Д.Д.: Где можно прокачиваться новичкам, чтобы отработать полученные на курсах знания и умения и предъявлять работодателю реальный опыт, реальный код?_ \n \nА.Р.: Прежде всего нужно завести профиль на ГитХабе или ГитЛабе, чтобы было куда выкладывать код. Рекомендую поискать или попросить у компаний тестовые задания. Если найти тестовые задания не получится, можно придумать их самому или погуглить app ideas list.\n\nУ «Злых марсиан» есть крутая инициатива[ Cult of Martians](https://cultofmartians.com/): они публикуют задачи по реальным опенсорс-проектам, можно выбрать любую, сделать её и получить в портфолио строчку о вкладе в опенсорс. \n\n___\n_Примечание редактора: «Хекслет» подготовил [репозиторий с тестовыми заданиями](https://github.com/Hexlet/ru-test-assignments) от известных компаний. Также у нас есть opensource-проект [Codebattle](https://codebattle.hexlet.io/), в котором может поучаствовать каждый желающий разработчик с любым уровнем подготовки._ \n___\n\n_Д.Д.: Как вы считаете, сколько нужно среднестатистическому человеку времени, чтобы изучить фронтенд-разработку и претендовать на позицию джуниора? Здесь без учёта индивидуальных особенностей, грубое среднее значение._ \n\nА.Р.: Если учиться фултайм, думаю, хватит от 6 до 9 месяцев, чтобы заложить качественный фундамент и устроиться на работу. Если срезать углы и идти на поводу у рынка (изучать сиюминутно популярные фреймворки вперёд основ), можно и быстрее устроиться, наверное. \n \n_Д.Д.: По вашему мнению, каждый ли может научиться разработке, или эта сфера для избранных? Какими качествами должен обладать человек, чтобы стать успешным разработчиком?_ \n \nА.Р.: Промышленная разработка — точно не сфера для избранных. Это ремесло, которому должны учить скорее в ПТУ, чем в вузах. Сложно выделить какие-то определённые качества. Я бы сказал, что в первую очередь нужен интерес. Если человеку интересна разработка, у него всё получится. \n\n_Д.Д.: Обучение программированию связано с трудностями и необходимостью дисциплинированно работать. Вы наверняка тоже сталкивались с трудностями и барьерами. Как их преодолевали? Можете что-то посоветовать новичкам? Что делать, когда опускаются руки?_ \n \nА.Р.: Мне кажется, любое обучение связано с трудностями и требует дисциплины. Как я уже сказал, в первую очередь помогает искренний интерес; лично мне очень сложно заниматься чем-то, что мне не интересно. Могу посоветовать курс [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn/), в котором как раз рассказывают, как эффективнее учиться и справляться с прокрастинацией. \n\n\n_Д.Д.: Куда человеку лучше идти работать после получения диплома или сертификата? Это должна быть крупная компания, или можно выбрать небольшую студию, фриланс? К чему стремиться, чтобы стать хорошим специалистом и хорошо зарабатывать?_ \n \nА.Р.: Надёжнее начинать со средней или крупной компании: выше вероятность, что в ней уже налажены процессы и выстроена инженерная культура. Но в первую очередь важны люди, с которыми вы будете работать: работу вы будете делать везде примерно одинаковую, а крутые и опытные коллеги могут сильно ускорить ваш профессиональный рост. \n \nЯ работал только в продуктовых компаниях и с аутсорсом не сталкивался, но исходя из рассказов знакомых, я бы не советовал идти в аутсорс. \n \nЧтобы стать хорошим специалистом и хорошо зарабатывать, нужно прокачивать не только технические навыки, но и софт-скиллы (психология, коммуникация, решение конфликтов и вот это всё). Важно помнить, что вам платят в первую очередь не за красоту кода, а за решение задач бизнеса. \n\n_Д.Д.: В Хекслет часто приходят в зрелом возрасте (30+). Есть кейсы, когда человек получает новую профессию и находит работу джуном в 30+ и даже в 40+ лет. По вашему опыту, есть ли проблема возраста (эйджизм) в сфере разработки? Стоит ли учиться в 30+, или эта отрасль для тех, кому 18?_ \n \nА.Р.: Мне сложно оценить ситуацию в отрасли, потому что я слишком молодой. По моему опыту, работодателям важно, чтобы специалист хорошо справлялся со своими задачами и чтобы у него была понятная мотивация. Я наблюдал такое проявление эйджизма: работодатель охотнее нанимал молодых кандидатов из-за того, что они чаще увлечены разработкой и горят ей, а не относятся к ней как к обычной работе. Но такое чаще встречается в стартапах, и я думаю, что зрелые кандидаты сами будут рады избежать таких работодателей. \n\n_Д.Д.: Насколько, по вашему мнению, важны для разработчика софт-скилы? Какими софт-скилами должен обладать хороший специалист?_ \n \nА.Р.: Как я уже говорил, софтскилы важны. Любому разработчику приходится взаимодействовать с людьми, будь то заказчики, менеджеры, дизайнеры или другие программисты. В основном нужно уметь вести переговоры, доносить и отстаивать свою точку зрения. Нужно уметь говорить руководству «нет». Нужно уметь открыто обсуждать проблемы и признавать ошибки. \n \nРекомендую подкаст [Soft Skills Engineering](https://softskills.audio/) о развитии софтскилов для инженеров. \n\n::posts\n\n_Д.Д.: Разработчику приходится учиться всю жизнь. Как вы считаете, хороший специалист должен копать вглубь или вширь? Например, фронтендеру лучше прокачиваться в своём направлении, углубляться в технологии, изучать фреймворки, библиотеки? Или лучше расширять кругозор, знакомиться с бэкендом, учить серверные языки?_ \n \nА.Р.: Нужно прокачиваться и вширь, и вглубь. В начале пути нужно будет копать вглубь, чтобы овладеть азами, а затем можно начинать прокачиваться вширь. Стоит изучить основы дизайна, потому что фронтендерам тоже нужно принимать решения за дизайнера (например, когда тот не продумал некоторые состояния интерфейса). Понимание серверной разработки будет полезно для общения с бэкендерами и проектирования API. Стоит прокачаться в тестировании, управлении проектами, психологии. Ну и, конечно, полезным будет понимание предметной области продукта, который вы разрабатываете.\n\n\n_Д.Д.: Дайте, пожалуйста, совет читателям Хекслета. Как эффективно обучаться, как стать хорошим специалистом?_ \n\nА.Р.: Для эффективного обучения я уже посоветовал курс [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn/). От себя могу добавить, что залог эффективного обучения и успеха в работе — интерес к тому, чем занимаешься. Остальное приложится!\n\n_Д.Д.: Спасибо за интересные ответы!_\n\nА.Р.: Успехов читателям!","reading_time":10,"url":"https://ru.hexlet.io/blog/posts/osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda","cover_thumb_variant":null,"cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp","cover_main_variant":"/vite/assets/blog_post-7eTyeLLt.webp","related_stacks_count":5},"relatedPosts":[{"model_name":"BlogPost","id":420,"title":"50 лучших фильмов и сериалов о технологиях","slug":"filmoteka-dlya-programmistov-25-filmov-o-programmirovanii-tehnologiyah-i-iskusstvennom-intellekte","summary":"Сделали подборку фильмов о технологиях, программировании, искусственном интеллекте и роботах.","created_at":"2019-07-30T13:04:28.309Z","published_at":"2022-12-30T12:14:16.059Z","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY5OSwicHVyIjoiYmxvYl9pZCJ9fQ==--ecd38e914c68debadef03c88a60804b37146e5b5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%84%D0%B8%D0%BB%D1%8C%D0%BC%D1%8B%20IT-01.png"},{"model_name":"BlogPost","id":111,"title":"Как эффективно читать профессиональную литературу","slug":"how-to-read-books","summary":"Cооснователь Хекслета Кирилл Мокевнин рассказывает, как эффективно читать профессиональную литературу и каким образом правильно выбирать книги.","created_at":"2017-03-19T16:40:36.334Z","published_at":"2022-12-14T13:51:37.375Z","cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp"},{"model_name":"BlogPost","id":133,"title":"Как самоуверенность мешает достигать успехов в учебе, и что с этим делать","slug":"ego-is-the-enemy-for-software-developers","summary":"Иногда проблемы в учебе, общении и профессиональном развитии появляются из-за завышенной самооценки. О том, как избавиться от высокого самомнения и достичь успеха в разработке, рассказал программист Фатос Морина.","created_at":"2017-07-13T11:08:00.282Z","published_at":"2022-09-09T12:12:50.980Z","cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp"}],"category":{"id":6,"name":"Мотивация","slug":"motivation","state":"published","created_at":"2016-10-06T18:31:38.903Z"},"mainStackCategory":{"id":2,"name":"Курсы по веб-разработке","slug":"web_development","short_name":"Веб-разработка","order":190,"state":"published","category_slug":"courses_web_development"},"categories":[{"id":6,"name":"Мотивация","slug":"motivation","state":"published","created_at":"2016-10-06T18:31:38.903Z"},{"id":3,"name":"Истории успеха","slug":"success","state":"published","created_at":"2016-07-30T12:57:18.308Z"},{"id":14,"name":"Дневник студента","slug":"student-diary","state":"published","created_at":"2019-02-25T13:27:09.471Z"},{"id":4,"name":"Код","slug":"code","state":"published","created_at":"2016-08-23T13:33:44.258Z"},{"id":12,"name":"Карьера","slug":"career","state":"published","created_at":"2017-07-21T15:42:21.481Z"}],"relatedLandings":[{"stack":{"id":12,"slug":"frontend","title":"Фронтенд-разработчик","audience":"for_beginners","start_type":"weekly","pricing_model":"purchase","priority":"high","kind":"profession","state":"published","stack_state":"finished","order":20,"duration_in_months":10},"id":17,"slug":"frontend","title":"Фронтенд-разработчик","subtitle":"Изучите HTML, CSS, JavaScript и React","subtitle_for_lists":"Изучите HTML, CSS, JavaScript и React","locale":"ru","current":true,"duration_in_months_text":"10 месяцев","stack_slug":"frontend","price_text":"от 6 792 ₽","duration_text":"10 месяцев","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png"},{"stack":{"id":19,"slug":"layout-designer","title":"Профессиональная верстка","audience":"for_beginners","start_type":"anytime","pricing_model":"purchase","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":1700,"duration_in_months":5},"id":26,"slug":"professional-layout","title":"Профессиональная верстка","subtitle":"Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях","subtitle_for_lists":"Адаптивная вёрстка для отображения на любых устройствах ","locale":"ru","current":true,"duration_in_months_text":"5 месяцев","stack_slug":"layout-designer","price_text":"от 3 900 ₽","duration_text":"5 месяцев","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png"},{"stack":{"id":23,"slug":"js-react-development","title":"React","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":350,"duration_in_months":2},"id":34,"slug":"js-react-developer","title":"React","subtitle":"Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях","subtitle_for_lists":"Освоите React и создание быстрых интерфейсов","locale":"ru","current":true,"duration_in_months_text":"2 месяца","stack_slug":"js-react-development","price_text":"от 3 900 ₽","duration_text":"2 месяца","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png"},{"stack":{"id":29,"slug":"js-oop","title":"ООП на Javascript","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":4250,"duration_in_months":2},"id":46,"slug":"js-oop","title":"ООП на Javascript","subtitle":"Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи","subtitle_for_lists":"Изучите архитектуру и принципы чистого кода на JS","locale":"ru","current":true,"duration_in_months_text":"2 месяца","stack_slug":"js-oop","price_text":"от 3 900 ₽","duration_text":"2 месяца","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png"},{"stack":{"id":34,"slug":"algorithms","title":"Алгоритмы и структуры данных","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":4000,"duration_in_months":2},"id":56,"slug":"algorithms","title":"Алгоритмы и структуры данных","subtitle":"Навык, который увеличит ваши шансы пройти алгоритмическое интервью в международные компании на 80%","subtitle_for_lists":"Алгоритмы для собеседований","locale":"ru","current":true,"duration_in_months_text":"2 месяца","stack_slug":"algorithms","price_text":"от 3 900 ₽","duration_text":"2 месяца","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--ae9eed98663dd1201759d042a5ba7ca790866156/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-bro.png"}]},"url":"/blog/posts/osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda","version":"8f286f6358a90a7bef2263b3a6edf5a90a94fa42","encryptHistory":false,"clearHistory":false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","author":"Дмитрий Дементий","name":"Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда","datePublished":"2019-08-20T08:07:21.200Z","headline":"В рубрике «Развитие» предлагаем вам интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, своих взглядах на обучение программистов и развитие разработчиков. ","image":"/vite/assets/blog_post-7eTyeLLt.webp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":17}]}</script><div style="--container-size:var(--container-size-lg);margin-top:var(--mantine-spacing-xl);height:100%" class="m_7485cace mantine-Container-root" data-size="lg" data-strategy="block"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"position":1,"@type":"ListItem","item":{"@id":"/blog","name":"Блог Хекслета"}},{"position":2,"@type":"ListItem","item":{"@id":"/blog/categories/motivation","name":"Мотивация"}},{"position":3,"@type":"ListItem","item":{"@id":"/blog/posts/osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda","name":"Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда"}}]}</script><div style="margin-bottom:var(--mantine-spacing-xs)" class="m_8b3717df mantine-Breadcrumbs-root"><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/"><div style="color:inherit" class="m_4451eb3a mantine-Center-root"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-home-link "><path d="M20.085 11.085l-8.085 -8.085l-9 9h2v7a2 2 0 0 0 2 2h4.5"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 1.807 1.143"></path><path d="M20 21a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M20 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M15 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M21 16l-5 3l5 2"></path></svg></div></a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog">Блог Хекслета</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog/categories/motivation">Мотивация</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root" data-size="sm">Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда</p></div><style data-mantine-styles="inline">.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}@media(min-width: 36em){.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}}</style><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root __m__-_R_eub_"><style data-mantine-styles="inline">.__m__-_R_deub_{width:100%;}@media(min-width: 36em){.__m__-_R_deub_{width:70%;}}@media(min-width: 75em){.__m__-_R_deub_{width:75%;}}</style><div class="__m__-_R_deub_"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="1">Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда</h1></div></div></div><div style="position:absolute;top:calc(18.75rem * var(--mantine-scale))" class=""></div><style data-mantine-styles="inline">.__m__-_R_2iub_{--grid-gutter:var(--mantine-spacing-xl);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_2iub_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}@media(min-width: 62em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_dmiub_"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start;margin-bottom:var(--mantine-spacing-xl)" class="m_6d731127 mantine-Stack-root"><div class=""><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><button style="--badge-height:var(--badge-height-sm);--badge-padding-x:var(--badge-padding-x-sm);--badge-fz:var(--badge-fz-sm);--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;color:inherit" class="m_347db0ec mantine-Badge-root" data-variant="default" data-size="sm" type="button" aria-label="Фронтенд"><span class="m_5add502a mantine-Badge-label">Фронтенд</span></button></div><div style="--group-gap:calc(0.625rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-sm);color:var(--mantine-color-gray-text)" class="m_4081bf90 mantine-Group-root"><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-inline-end:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root">20 августа 2019 г.</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-clock "><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg></div>10 минут</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div>17</div></div><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img style="--image-radius:var(--mantine-radius-md);--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="/vite/assets/blog_post-7eTyeLLt.webp" alt="Основатель For Web Андрей Романов: о разработке, обучении и перспективах фронтенда"/></div></div><div role="link" tabindex="0" style="cursor:pointer"><button style="display:block;width:100%" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Присоединяйтесь к нашему Telegram-сообществу"><div style="background-color:light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:auto;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-telegram "><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path></svg></div>Присоединяйтесь к нашему Telegram-сообществу</div></div></button></div><div style="margin-bottom:var(--mantine-spacing-xl)" class="m_d08caa0 mantine-Typography-root"><p>В рубрике «Развитие» публикуем интервью с Андреем Романовым — фронтенд-разработчиком, создателем популярного сообщества For Web. Андрей рассказал о себе и своих проектах, перспективах фронтенда, поделился взглядами на обучение и развитие программистов.</p>
<h2 id="heading-2-1">Содержание</h2>
<ul>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-2">О себе и своём обучении</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-3">О сообществе For Web</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-4">О фронтенде</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-5">Об обучении и карьере программистов</a></li>
</ul>
<h2 id="heading-2-2">О себе и своём обучении</h2>
<p><em>Дмитрий Дементий: Андрей, расскажите пожалуйста о себе: кто вы, чем занимаетесь, где работаете?</em></p>
<p>Андрей Романов: Меня зовут Андрей Романов, мне 21 год. Я фронтенд-разработчик из Омска, переехал в Москву в 2016 году после окончания Школы разработки интерфейсов Яндекса. Работаю в <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.joom.com" rel="noopener noreferrer" target="_blank">Joom</a> в команде службы поддержки. Развиваю сайд-проекты: <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://forwebdev.ru" rel="noopener noreferrer" target="_blank">For Web</a> (новости фронтенда) и <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/andrew--r/frontend-case-studies" rel="noopener noreferrer" target="_blank">frontend case studies</a> (коллекция материалов об опыте разработки интерфейсов в реальных компаниях).</p>
<p><em>Д.Д.: Где вы обучались разработке?</em></p>
<p>А.Р.: У меня нет формального образования. Единственные очные курсы, которые я окончил — это вышеупомянутая ШРИ Яндекса. В основном я учился всему самостоятельно: черпал теорию из статей и книг, делал учебные проекты, проходил онлайн-курсы на <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.coursera.org" rel="noopener noreferrer" target="_blank">Coursera</a>, <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://htmlacademy.ru" rel="noopener noreferrer" target="_blank">HTML Academy</a>, Code School (теперь уже <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.pluralsight.com" rel="noopener noreferrer" target="_blank">Pluralsight</a>) и <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://hexlet.io" rel="noopener noreferrer" target="_blank">Hexlet</a>.</p>
<style data-mantine-styles="inline">.__m__-_R_hderddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_hderddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_hderddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/frontend?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">10 месяцев</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Фронтенд-разработчик</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите HTML, CSS, JavaScript и React</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png" alt="Фронтенд-разработчик" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 6 792 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/professional-layout?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5 месяцев</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Профессиональная верстка</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Адаптивная вёрстка для отображения на любых устройствах </p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png" alt="Профессиональная верстка" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/js-react-developer?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">React</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Освоите React и создание быстрых интерфейсов</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png" alt="React" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/js-oop?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">ООП на Javascript</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите архитектуру и принципы чистого кода на JS</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png" alt="ООП на Javascript" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/algorithms?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Алгоритмы и структуры данных</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Алгоритмы для собеседований</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--ae9eed98663dd1201759d042a5ba7ca790866156/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-bro.png" alt="Алгоритмы и структуры данных" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&promo_position=blog_post&promo_creative=catalog_card&promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Каталог</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Полный список доступных курсов по разным направлениям</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div>
<p><em>Д.Д.: Знаю, что учились в том числе у нас. Можете поделиться впечатлениями, мнением о Хекслете?</em></p>
<p>А.Р.: Проблема многих книг и курсов (в том числе вузовских) в том, что они учат конкретным технологиям и языкам программирования: в них обычно рассказывают о синтаксисе языка и стандартной библиотеке, но не рассказывают, как проектировать и писать хорошие и поддерживаемые программы.</p>
<p>Курсы Хекслета в этом плане выгодно отличаются от других, потому что они учат не синтаксическим конструкциям конкретного языка, а фундаментальным принципам программирования. Плюс сам формат обучения мне нравится: изучаешь порцию теории и сразу закрепляешь её практикой, часто нетривиальной и заставляющей размять мозги.</p>
<h2 id="heading-2-3">О сообществе For Web</h2>
<p><em>Д.Д.: Ваш проект <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://forwebdev.ru/" rel="noopener noreferrer" target="_blank">For Web</a> — одно из самых популярных в рунете сообществ, посвященных фронтенду и программированию в целом. Расскажите о нём пожалуйста. Как создавалось, как развивалось, как функционирует сейчас?</em></p>
<p>А.Р.: В начале 2014 года я решил сохранять где-нибудь ссылки на найденные полезные статьи и инструменты, и завёл для этого страницу во «ВКонтакте». В какой-то момент понял, что это может быть интересно другим людям, запустил таргетированную рекламу и набрал первые несколько сотен подписчиков.</p>
<p>Затем был долгий период роста и экспериментов: я привлекал аудиторию, обмениваясь публикациями с сообществами смежной тематики, пробовал новые форматы вроде интервью, вопросов от подписчиков или коротких советов, перерисовывал логотип (<a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://sun9-52.userapi.com/c627720/v627720511/37869/4f3rH9Q8kCk.jpg" rel="noopener noreferrer" target="_blank">текущая версия</a> — третья, а так выглядели <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://pp.userapi.com/VrpoT1FLfAC_qnEnP5Y7IU5ogG59zYmgtvnumw/kpfbIeMp8Bo.jpg" rel="noopener noreferrer" target="_blank">первая</a> и <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://pp.userapi.com/6ZyO1Q-dStgz45HB4s9Gm_SxI4GfI3OmVcVNmg/yohMzUA-vyk.jpg" rel="noopener noreferrer" target="_blank">вторая</a>), пытался привлекать соавторов (в итоге я занимаюсь проектом в одиночку).</p>
<p>Сейчас формат устоялся, и аудитория, кажется, достигла некоторого потолка, хоть рост и продолжается. На сегодня For Web — это лента полезных материалов в <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vk.com/forwebdev" rel="noopener noreferrer" target="_blank">ВК</a>, <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://twitter.com/forwebdev" rel="noopener noreferrer" target="_blank">Твиттере</a> и <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://t.me/forwebdev" rel="noopener noreferrer" target="_blank">Телеграмме</a>, а также регулярный <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://forwebdev.ru/digest/" rel="noopener noreferrer" target="_blank">дайджест новостей фронтенда</a> для тех, кто не хочет тратить время и внимание на соцсети.</p>
<p><em>Д.Д.: В паблике вы курируете контент: публикуете интересные посты. Кто их подбирает? По каким критериям выбираете, что публиковать, а что нет?</em></p>
<p>А.Р.: Я слежу за множеством RSS-лент и email-рассылок. Если встречаю потенциально интересный материал, откладываю его в специальную очередь, которую затем фильтрую тщательнее, вникая в суть материала.</p>
<p>За время существования сообщества критерии сильно изменились. Сейчас я стараюсь публиковать как можно более долговечные и полезные широкому кругу подписчиков материалы (то есть статьи о хайповых фреймворках и библиотеках сразу отпадают). Отдельные жемчужины, которые я очень люблю — статьи из блогов компаний, рассказывающие о решении реальных рабочих задач. Я не публикую пиратские материалы. Я не ограничиваюсь материалами о фронтенде: парадигмы программирования, архитектура, софтскилы, дизайн и UX — всё это тоже полезно фронтендерам.</p>
<p><em>Д.Д.: Есть ли в сообществе модерация? Если участники начинают вести себя некорректно, что происходит?</em></p>
<p>А.Р.: Обычно я руководствуюсь здравым смыслом и удаляю очевидный спам. Раньше я пытался заставить подписчиков следовать определённым правилам поведения (например, писать конструктивные комментарии вместо бесполезных в духе «ерунда какая-то») и карал за их нарушения, но в какой-то момент я понял, что правила всё равно никто не читает, а людей не перевоспитать, и перестал за этим следить. Бывает, что дискуссии разгораются и участники начинают друг друга оскорблять; я не хочу вводить цензуру, поэтому обычно не вмешиваюсь.</p>
<h2 id="heading-2-4">О фронтенде</h2>
<p><em>Д.Д.: Вы фронтенд-разработчик, ваш проект <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vk.com/forwebdev" rel="noopener noreferrer" target="_blank">For Web</a> преимущественно посвящен фронтенду. Почему выбрали это направление?</em></p>
<p>А.Р.: Так получилось, что свой путь я начинал с книги по HTML, изучал вёрстку и параллельно пробовал разные языки программирования. Материалы по программированию, с которых я начинал, были довольно посредственные, и результатов с вёрсткой я добился гораздо быстрее. В основном это и повлияло на выбор направления: фронтенд позволяет очень быстро сделать что-то рабочее и осязаемое, а бэкенд на тот момент был мне непонятен и чужд.</p>
<p><em>Д.Д.: Как вы считаете, перспективно ли в данный момент обучаться фронтенд-разработке? Способствует ли этому ситуация на рынке труда? Или может быть есть более перспективные направления?</em></p>
<p>А.Р.: Открыл сейчас поиск hh.ru по Москве, там 1472 вакансии по запросу frontend и 1391 вакансия по запросу backend. Учитывая фрагментированность бэкенда (Python-программистов не всегда готовы нанимать на Java или Go), фронтенд кажется востребованнее. С другой стороны, бэкендеры имеют лучшие карьерные перспективы: я не знаю примеров, когда в техдиректоры вырастали бы из фронтенда.</p>
<p>В вебе появляется всё больше средств для разработки сложных приложений (PWA, WebAssembly, браузерные API для доступа к железу), и это тоже влияет на востребованность фронтендеров: многие компании делают веб-приложения, чтобы сэкономить на разработке нативных приложений под каждую платформу.</p>
<p><em>Д.Д.: Как вы думаете, чистые верстальщики без знаний программирования конкурентоспособны на рынке труда? Или на вёрстке останавливаться нельзя, надо развиваться и учиться программированию?</em></p>
<p>А.Р.: На западе в принципе нет такого понятия как «верстальщик» — там верстают либо дизайнеры, либо программисты. Да и в России практически нет вакансий именно про вёрстку, обычно ищут фронтенд-разработчиков, которые должны уметь и сверстать интерфейс, и запрограммировать его. Думаю, ситуация на рынке говорит сама за себя.</p>
<p><em>Д.Д.: С вашей точки зрения у JavaScript-разработчиков <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://ru.hexlet.io/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov" rel="noopener noreferrer" target="_blank">есть светлое будущее</a>? В обозримой перспективе нет ли каких-то технологий или языков, которые заменят JS-программистов? (WebAssembly и так далее). Может уже сразу надо учиться чему-то другому?</em></p>
<p>А.Р.: В обозримой перспективе HTML/CSS/JavaScript из браузеров никуда не денутся. Чтобы не упустить светлое будущее, не нужно позиционировать себя как React-разработчик или JavaScript-разработчик. Учитесь фундаментальным вещам, а не модным фреймворкам, и тогда ваши знания не будут быстро устаревать.</p>
<p><em>Д.Д.: Сейчас на коне React, популярен Vue, Angular вроде бы сдаёт позиции, но всё равно востребован. Через несколько лет фронтендеры будут пользоваться этими инструментами или появятся новые фреймворки и библиотеки?</em></p>
<p>А.Р.: Учитывая то, с какой скоростью развивается фронтенд, появление новых фреймворков исключить сложно. Но в любом случае останется множество написанных сейчас проектов, которые переписывать будет нецелесообразно, так что нынешние фреймворки не исчезнут совсем.</p>
<p><em>Д.Д.: В целом, куда идёт фронтенд-разработка? Есть какие-то выраженные тенденции, которые серьёзно изменят рынок, подходы к работе, ситуацию в сфере занятости фронтендеров в ближайшей перспективе?</em></p>
<p>А.Р.: Я наблюдаю развитие веб-платформы в сторону полноценных приложений. Пока что веб скорее догоняет мобильную разработку по возможностям и подходам, но у веба есть важное преимущество — кроссплатформенность. Могу выделить несколько перспективных направлений, технологий и подходов.</p>
<p>PWA — приложения, обеспечивающие близкий к нативному UX, работу в офлайне, установку приложения на мобильный или десктоп. Реализуются с помощью набора специальных API вроде сервис-воркеров.</p>
<p>WebAssembly — технология, позволяющая запускать в вебе ресурсоёмкие приложения, написанные на языках вроде C/C++/Rust. Несмотря на молодость технологии, её уже используют продукты вроде <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://blogs.unity3d.com/2018/08/15/webassembly-is-here/" rel="noopener noreferrer" target="_blank">Unity</a>, <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/" rel="noopener noreferrer" target="_blank">Figma</a> и <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/" rel="noopener noreferrer" target="_blank">eBay</a>.</p>
<p>CSS Houdini позволит расширять CSS за счёт доступа к механизму отрисовки страницы браузером. Например, это позволит писать полифилы для новых возможностей CSS и не ждать их реализации разработчиками браузеров.</p>
<p>Только-только зарождающаяся идея, заимствованная из мобильной разработки — вынос в отдельные треды всех вычислений, не связанных с отрисовкой интерфейса, чтобы не блокировать ими этот самый интерфейс.</p>
<p>Ещё одна интересная идея — переход от фреймворков с тяжёлым рантаймом к фреймворкам, компилируемым в минимально необходимый для работы приложения код. Пионер в этой сфере — <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://svelte.dev/" rel="noopener noreferrer" target="_blank">Svelte</a>.</p>
<p>Современные браузеры поддерживают последние стандарты и API (вплоть до ES-модулей), что позволяет отказаться от инструментов сборки и транспиляции кода вроде webpack и babel, тем самым сильно сократив объём кода, который браузеру нужно скачать, распарсить и выполнить. Пока не все браузеры поддерживают последние стандарты, можно реализовать<a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://jasonformat.com/modern-script-loading/" rel="noopener noreferrer" target="_blank"> раздельную раздачу кода</a>: старым браузерам отдавать собранную и транспилированную версию приложения, а современным — облегчённую.</p>
<p><em>Д.Д.: Сейчас на слуху технология PWA. Прогрессивные веб-приложения активно популяризирует Google. Есть фреймворки типа Gatsby, которые генерируют сайты с характеристиками PWA. Эта технология откусит долю рынка у нативных приложений?</em></p>
<p>А.Р.: Да, PWA уже разработали и запустили многие крупные компании вроде Uber, Pinterest, Tinder, Twitter. Многие компании пока ещё стремятся чуть ли не принудительно перетягивать мобильных пользователей из веба в нативные приложения, но я думаю, что через несколько лет это изменится, когда бизнес поймёт ценность и возможности мобильного веба.</p>
<p>Доносить ценность и возможности до бизнеса должны как раз фронтендеры: когда я работал в Авито, мой коллега хорошо обосновал и продал бизнесу идею перезапуска мобильной версии сайта, взялся за реализацию и довёл её до конечного продукта. Благодаря нему у Авито теперь более удобная и современная мобильная версия, близкая к нативным приложениям по функциональности и дизайну.</p>
<p><em>Д.Д.: Как вы относитесь с CSS-фреймворкам? Это полезные инструменты? Можно ли их использовать в продакшене с вашей точки зрения?</em></p>
<p>А.Р.: На мой взгляд, они полезны либо тогда, когда команда с ними хорошо знакома и они действительно помогают ей быстрее доставлять ценность бизнесу, либо когда стоит задача быстро набросать прототип интерфейса не по дизайн-макету. В остальных случаях они доставят больше головной боли, чем пользы. Самый популярный фреймворк Bootstrap полон CSS-антипаттернов вроде глобальных стилей и вложенных селекторов, что делает болью поддержку интерфейсов, использующих его. Алексей Иванов в блоге «Злых марсиан» разбирал <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://evilmartians.com/chronicles/bootstrap-an-intervention" rel="noopener noreferrer" target="_blank">проблемы Бутстрапа</a>.</p>
<h2 id="heading-2-5">Об обучении и карьере программистов</h2>
<p><em>Д.Д.: Как вы думаете, что должен знать и уметь новичок, чтобы претендовать на позицию джуниор-фронтендера? Можно прямо список технологий и умений.</em></p>
<p>А.Р.: В первую очередь нужно крепко знать HTML, CSS и основы JavaScript. Сейчас многие кидаются изучать фреймворки, пропуская основы. Так делать не нужно. HTML/CSS/JS вы изучаете один раз и надолго, они составляют фундамент, без которого будет сложно решать реальные задачи. Фреймворки меняются, и по опыту собеседования в крупные компании вроде Яндекса, Авито или Тинькова могу сказать, что знание фреймворков обычно не так важно, как знание базовых веб-технологий.</p>
<p>Конечно, мало просто знать теорию. Нужно уметь применять её. Я бы ждал от джуниора умения семантично и адаптивно верстать, умения запрограммировать несложный интерфейс. Проверить эти умения можно на каком-нибудь простом примере вроде виджета конвертации валют.</p>
<p><em>Д.Д.: Опишите, пожалуйста, идеальную систему подготовки фронтенд-разработчика. Иными словами, как абсолютному новичку прямо сейчас, в 2019 году, научиться разработке и стать востребованным на рынке труда специалистом? Куда идти, что читать, что покупать, что делать?</em></p>
<p>А.Р.: Я бы порекомендовал взяться за курсы HTML Academy, чтобы научиться основам вёрстки, и параллельно взяться за курсы Хекслета, чтобы заложить фундамент в программировании. JavaScript и браузерные API рекомендую изучать на <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="http://learn.javascript.ru/" rel="noopener noreferrer" target="_blank">learn.javascript.ru</a>. Эти три ресурса содержат большинство необходимой теории, закрепляемой практическими заданиями.</p>
<p>Как только сможете написать виджет обмена валют, рекомендую идти на собеседования в реальные компании, чтобы сразу обнаружить пробелы в знаниях (или же удачно получить офер). Также новичкам будет полезно пройти ШРИ Яндекса: даже если вы не собираетесь в Яндекс, это прокачает ваши навыки фронтенда и даст опыт работы в команде, а ещё даст кучу полезных знакомств.</p>
<p><em>Д.Д.: Где можно прокачиваться новичкам, чтобы отработать полученные на курсах знания и умения и предъявлять работодателю реальный опыт, реальный код?</em></p>
<p>А.Р.: Прежде всего нужно завести профиль на ГитХабе или ГитЛабе, чтобы было куда выкладывать код. Рекомендую поискать или попросить у компаний тестовые задания. Если найти тестовые задания не получится, можно придумать их самому или погуглить app ideas list.</p>
<p>У «Злых марсиан» есть крутая инициатива<a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://cultofmartians.com/" rel="noopener noreferrer" target="_blank"> Cult of Martians</a>: они публикуют задачи по реальным опенсорс-проектам, можно выбрать любую, сделать её и получить в портфолио строчку о вкладе в опенсорс.</p>
<hr/>
<p><em>Примечание редактора: «Хекслет» подготовил <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/Hexlet/ru-test-assignments" rel="noopener noreferrer" target="_blank">репозиторий с тестовыми заданиями</a> от известных компаний. Также у нас есть opensource-проект <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://codebattle.hexlet.io/" rel="noopener noreferrer" target="_blank">Codebattle</a>, в котором может поучаствовать каждый желающий разработчик с любым уровнем подготовки.</em></p>
<hr/>
<p><em>Д.Д.: Как вы считаете, сколько нужно среднестатистическому человеку времени, чтобы изучить фронтенд-разработку и претендовать на позицию джуниора? Здесь без учёта индивидуальных особенностей, грубое среднее значение.</em></p>
<p>А.Р.: Если учиться фултайм, думаю, хватит от 6 до 9 месяцев, чтобы заложить качественный фундамент и устроиться на работу. Если срезать углы и идти на поводу у рынка (изучать сиюминутно популярные фреймворки вперёд основ), можно и быстрее устроиться, наверное.</p>
<p><em>Д.Д.: По вашему мнению, каждый ли может научиться разработке, или эта сфера для избранных? Какими качествами должен обладать человек, чтобы стать успешным разработчиком?</em></p>
<p>А.Р.: Промышленная разработка — точно не сфера для избранных. Это ремесло, которому должны учить скорее в ПТУ, чем в вузах. Сложно выделить какие-то определённые качества. Я бы сказал, что в первую очередь нужен интерес. Если человеку интересна разработка, у него всё получится.</p>
<p><em>Д.Д.: Обучение программированию связано с трудностями и необходимостью дисциплинированно работать. Вы наверняка тоже сталкивались с трудностями и барьерами. Как их преодолевали? Можете что-то посоветовать новичкам? Что делать, когда опускаются руки?</em></p>
<p>А.Р.: Мне кажется, любое обучение связано с трудностями и требует дисциплины. Как я уже сказал, в первую очередь помогает искренний интерес; лично мне очень сложно заниматься чем-то, что мне не интересно. Могу посоветовать курс <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.coursera.org/learn/learning-how-to-learn/" rel="noopener noreferrer" target="_blank">Learning How to Learn</a>, в котором как раз рассказывают, как эффективнее учиться и справляться с прокрастинацией.</p>
<p><em>Д.Д.: Куда человеку лучше идти работать после получения диплома или сертификата? Это должна быть крупная компания, или можно выбрать небольшую студию, фриланс? К чему стремиться, чтобы стать хорошим специалистом и хорошо зарабатывать?</em></p>
<p>А.Р.: Надёжнее начинать со средней или крупной компании: выше вероятность, что в ней уже налажены процессы и выстроена инженерная культура. Но в первую очередь важны люди, с которыми вы будете работать: работу вы будете делать везде примерно одинаковую, а крутые и опытные коллеги могут сильно ускорить ваш профессиональный рост.</p>
<p>Я работал только в продуктовых компаниях и с аутсорсом не сталкивался, но исходя из рассказов знакомых, я бы не советовал идти в аутсорс.</p>
<p>Чтобы стать хорошим специалистом и хорошо зарабатывать, нужно прокачивать не только технические навыки, но и софт-скиллы (психология, коммуникация, решение конфликтов и вот это всё). Важно помнить, что вам платят в первую очередь не за красоту кода, а за решение задач бизнеса.</p>
<p><em>Д.Д.: В Хекслет часто приходят в зрелом возрасте (30+). Есть кейсы, когда человек получает новую профессию и находит работу джуном в 30+ и даже в 40+ лет. По вашему опыту, есть ли проблема возраста (эйджизм) в сфере разработки? Стоит ли учиться в 30+, или эта отрасль для тех, кому 18?</em></p>
<p>А.Р.: Мне сложно оценить ситуацию в отрасли, потому что я слишком молодой. По моему опыту, работодателям важно, чтобы специалист хорошо справлялся со своими задачами и чтобы у него была понятная мотивация. Я наблюдал такое проявление эйджизма: работодатель охотнее нанимал молодых кандидатов из-за того, что они чаще увлечены разработкой и горят ей, а не относятся к ней как к обычной работе. Но такое чаще встречается в стартапах, и я думаю, что зрелые кандидаты сами будут рады избежать таких работодателей.</p>
<p><em>Д.Д.: Насколько, по вашему мнению, важны для разработчика софт-скилы? Какими софт-скилами должен обладать хороший специалист?</em></p>
<p>А.Р.: Как я уже говорил, софтскилы важны. Любому разработчику приходится взаимодействовать с людьми, будь то заказчики, менеджеры, дизайнеры или другие программисты. В основном нужно уметь вести переговоры, доносить и отстаивать свою точку зрения. Нужно уметь говорить руководству «нет». Нужно уметь открыто обсуждать проблемы и признавать ошибки.</p>
<p>Рекомендую подкаст <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://softskills.audio/" rel="noopener noreferrer" target="_blank">Soft Skills Engineering</a> о развитии софтскилов для инженеров.</p>
<style data-mantine-styles="inline">.__m__-_R_4nderddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:80%;}@media(min-width: 36em){.__m__-_R_4nderddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_4nderddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/filmoteka-dlya-programmistov-25-filmov-o-programmirovanii-tehnologiyah-i-iskusstvennom-intellekte"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY5OSwicHVyIjoiYmxvYl9pZCJ9fQ==--ecd38e914c68debadef03c88a60804b37146e5b5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%84%D0%B8%D0%BB%D1%8C%D0%BC%D1%8B%20IT-01.png" loading="lazy" alt="50 лучших фильмов и сериалов о технологиях"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">50 лучших фильмов и сериалов о технологиях</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Сделали подборку фильмов о технологиях, программировании, искусственном интеллекте и роботах.</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">30 декабря 2022 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/how-to-read-books"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="/vite/assets/blog_post-7eTyeLLt.webp" loading="lazy" alt="Как эффективно читать профессиональную литературу"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Как эффективно читать профессиональную литературу</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Cооснователь Хекслета Кирилл Мокевнин рассказывает, как эффективно читать профессиональную литера...</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">14 декабря 2022 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/ego-is-the-enemy-for-software-developers"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="/vite/assets/blog_post-7eTyeLLt.webp" loading="lazy" alt="Как самоуверенность мешает достигать успехов в учебе, и что с этим делать"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Как самоуверенность мешает достигать успехов в учебе, и что с этим делать</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Иногда проблемы в учебе, общении и профессиональном развитии появляются из-за завышенной самооцен...</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">9 сентября 2022 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div></div></div></div>
<p><em>Д.Д.: Разработчику приходится учиться всю жизнь. Как вы считаете, хороший специалист должен копать вглубь или вширь? Например, фронтендеру лучше прокачиваться в своём направлении, углубляться в технологии, изучать фреймворки, библиотеки? Или лучше расширять кругозор, знакомиться с бэкендом, учить серверные языки?</em></p>
<p>А.Р.: Нужно прокачиваться и вширь, и вглубь. В начале пути нужно будет копать вглубь, чтобы овладеть азами, а затем можно начинать прокачиваться вширь. Стоит изучить основы дизайна, потому что фронтендерам тоже нужно принимать решения за дизайнера (например, когда тот не продумал некоторые состояния интерфейса). Понимание серверной разработки будет полезно для общения с бэкендерами и проектирования API. Стоит прокачаться в тестировании, управлении проектами, психологии. Ну и, конечно, полезным будет понимание предметной области продукта, который вы разрабатываете.</p>
<p><em>Д.Д.: Дайте, пожалуйста, совет читателям Хекслета. Как эффективно обучаться, как стать хорошим специалистом?</em></p>
<p>А.Р.: Для эффективного обучения я уже посоветовал курс <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.coursera.org/learn/learning-how-to-learn/" rel="noopener noreferrer" target="_blank">Learning How to Learn</a>. От себя могу добавить, что залог эффективного обучения и успеха в работе — интерес к тому, чем занимаешься. Остальное приложится!</p>
<p><em>Д.Д.: Спасибо за интересные ответы!</em></p>
<p>А.Р.: Успехов читателям!</p></div><div class=""><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-user "><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg></div><p style="margin-inline-end:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Дмитрий Дементий</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">7 лет назад</p></div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5dirddmiub_"><a style="display:inline-flex" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/osnovatel-for-web-andrey-romanov-o-razrabotke-obuchenii-i-perspektivah-frontenda/votes"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div></a><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">17</p></div></div></div><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding:var(--mantine-spacing-xl)" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Читайте также:</p><ul style="margin-inline-start:var(--mantine-spacing-lg)" class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/filmoteka-dlya-programmistov-25-filmov-o-programmirovanii-tehnologiyah-i-iskusstvennom-intellekte">50 лучших фильмов и сериалов о технологиях</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/how-to-read-books">Как эффективно читать профессиональную литературу</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/ego-is-the-enemy-for-software-developers">Как самоуверенность мешает достигать успехов в учебе, и что с этим делать</a></span></div></li></ul></div><div style="margin-block:var(--mantine-spacing-xl)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div></div><div></div></div><style data-mantine-styles="inline">.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}@media(min-width: 62em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_lmiub_ mantine-visible-from-md"><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-bottom:var(--mantine-spacing-xl);padding:var(--mantine-spacing-xl);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="margin-bottom:var(--mantine-spacing-md)" class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Категории</p></div><ul class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Мотивация">Мотивация</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Истории успеха">Истории успеха</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Дневник студента">Дневник студента</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Код">Код</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Карьера">Карьера</button></span></div></li></ul></div><div style="justify-content:end;margin-top:0rem;position:sticky;top:calc(5rem * var(--mantine-scale))" class="m_8bffd616 mantine-Flex-root __m__-_R_5dlmiub_"><div tabindex="0" style="cursor:pointer"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses_web_development?promo_name=program_category&promo_position=blog_post&promo_creative=card&promo_type=card"><div style="background-color:var(--mantine-color-default);border:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);padding-inline:var(--mantine-spacing-xl);padding-top:var(--mantine-spacing-xl);padding-bottom:var(--mantine-spacing-xs);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Курсы по веб-разработке</p></div><img class="m_9e117634 mantine-Image-root" src="/vite/assets/development-BVihs_d5.png"/><p style="margin-bottom:var(--mantine-spacing-xs);text-align:right" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></a></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">Хекслет</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">О нас</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/testimonials">Отзывы</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://b2b.hexlet.io" role="button">Корпоративное обучение</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/blog">Блог</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/qna">Вопросы и ответы</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/glossary">Глоссарий</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io" data-target="_blank" role="button">Справка</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Карта сайта</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Направления</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_data_analytics">Аналитика
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend_development">Бэкенд
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_programming">Программирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Тестирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_front_end_dev">Фронтенд
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Профессии</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/go">Go-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/java">Java-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python">Python-разработчик </a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/data-analytics">Аналитик данных</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/qa-engineer">Инженер по ручному тестированию</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php">РНР-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Фронтенд-разработчик</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Навыки</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python-django-developer">Django</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/docker">Docker</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php-laravel-developer">Laravel</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/postman">Postman</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-developer">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-rest-api">REST API в Node.js</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/spring-boot">Spring Boot</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/typescript">Typescript</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Telegram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://t.me/hexlet_ru"><span class="bi bi-telegram"></span>
</a></li>
<li>
<a aria-label="Youtube" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.youtube.com/user/HexletUniversity"><span class="bi bi-youtube"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:8%20800%20100%2022%2047">8 800 100 22 47</a>
<span class="d-block opacity-50 small">бесплатно по РФ</span>
</li>
<li>
<a class="link-light text-decoration-none" href="tel:%2B7%20495%20085%2021%2062">+7 495 085 21 62</a>
<span class="d-block opacity-50 small">бесплатно по Москве</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<div class="small mb-3">Образовательные услуги оказываются на основании Л035-01298-77/01989008 от 14.03.2025</div>
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Правовая информация</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer">Оферта</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/license">Лицензия</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts">Контакты</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>ООО «<a href="/" class="text-decoration-none link-light">Хекслет Рус</a>»</div>
<div>108813 г. Москва, вн.тер.г. поселение Московский,</div>
<div>г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3</div>
<div>ОГРН 1217300010476</div>
<div>ИНН 7325174845</div>
</div>
<hr>
<div>АНО ДПО «<a href="/" class="text-decoration-none link-light">Учебный центр «Хекслет</a>»</div>
<div>119331 г. Москва, вн. тер. г. муниципальный округ</div>
<div>Ломоносовский, пр-кт Вернадского, д. 29</div>
<div>ОГРН 1247700712390</div>
<div>ИНН 7736364948</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-Bukl1lYy.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-BrRXra1y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DbyKWoR_.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-V011pkdv.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-XR8Qr8kR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dist-GCHh59xr.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-HJ6VK0D3.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-KSp6QbZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-l6ipYlLR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-jMQ_Cf4f.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v67327c56f0bb4ef8b305cae61679db8f1769101564043" integrity="sha512-rdcWY47ByXd76cbCFzznIcEaCN71jqkWBBqlwhF1SY7KubdLKZiEGeP7AyieKZlGP9hbY/MhGrwXzJC/HulNyg==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>