В этой статье пойдет разговор о том, кто такой веб-разработчик и чем он занимается. Отдельное внимание уделим навыкам, которыми должен обладать такой специалист.
Веб-разработчик — кто это?
Современный разработчик web-приложений занимается разработкой сайтов, онлайн-сервисов и соответствующего ПО. Это как раз тот случай, когда слово web говорит само за себя.
Для справки: Web переводится с английского как «паутина». Речь идет о глобальном интернет-пространстве — всемирной системе объединенных компьютерных сетей, предназначенных для хранения/передачи/обмена информацией.
Сегодня, когда упоминают веб-разработчика, чаще всего имеют виду фронтендера, который имеет представление и о бэкенде. В большинстве случаев именно фронтенд-разработка является основной прерогативой такого специалиста и именно фронтенд является большей частью работы. Однако в современных реалиях веб-разработчику все чаще надо разрабатывать еще и бэкенд — если не весь, то какие-либо его части (типичный пример — задачи, решаемые веб-разработчиком с помощью Node.js). Фронтенд — то, что видит пользователь, бэкенд — то, что остается за пределом видимости (серверная часть); подробнее об этих понятиях можно почитать здесь.
Задачи, решаемые веб-разработчиком
На практике это:
— создание онлайн-сервисов;
— создание новых сайтов, поддержка/модернизация/дополнение уже существующих сайтов;
— создание веб-приложений.
С результатом такой работы ежедневно сталкивается почти каждый, кто пользуется:
— социальными сетями;
— развлекательными онлайн-порталами;
— банковским программным обеспечением;
— сервисами по просмотру видео;
— другими приложениями, программами и сайтами, работающими как на персональных компьютерах, так и на мобильных гаджетах.
Весь этот софт связывает термин Web — понятие, подразумевающее огромную вселенную, существующую в интернете. Отсюда вытекает простой вывод — разработчик с такой специальностью решает задачи, связанные с web-программированием (веб-разработкой).
Стадии работы
Как все выглядит на реальном проекте? Если простыми словами, то веб-разработчик выполняет следующие действия:
— изучает задачу, поставленную заказчиком;
— участвует в создании оптимального решения;
— разрабатывает код для фронтенда/бэкенда;
— исправляет ошибки после тестирования программного обеспечения;
— развертывает код на сервере.
Общий цикл разработки, а также основные стадии и используемые инструменты продемонстрированы на картинке ниже:
Не будет лишним рассмотреть этот процесс с точки зрения разницы между бэкенд- и фронтенд-задачами на примере:
1.Веб-разработчику дали задание создать адаптивный лендинг для сайта продукта. Роли следующие:
-
бэкендер. Создает код для сбора и хранения информации, которую пользователи оставляют на лендинге через форму обратной связи;
-
фронтендер. Выполняет верстку макета лендинга сайта с учетом кроссбраузерности и кроссплатформенности (на разных устройствах и в разных браузерах все компоненты должны выглядеть корректно и в соответствии с требованиями).
2.Вторая задача — интеграция на сайт платежной системы:
-
бэкендер. Создает структуру, обеспечивающую фиксацию данных о переводах средств, передачу этих данных в финансовое учреждение, оповещение пользователей и (или) владельцев сервиса;
-
фронтендер. Внедряет решение непосредственно на сайте либо в application, отвечает за корректную работу всего функционала (интерфейс приложения должен адекватно реагировать на действия пользователя, выдавать сообщения об ошибках/выполненных операциях).
3.Последний таск — создание интерфейса для регистрации и авторизации:
-
бэкендер. Отвечает за обработку данных и их передачу на сервер с последующим сохранением, обеспечивает защиту данных;
-
фронтендер. Отвечает за всю видимую (внешнюю) часть приложения: анимацию, функциональные кнопки и т. п.
В процессе решения поставленных задач веб-разработчику приходится тесно взаимодействовать и с другими членами команды: дизайнерами, менеджером, тестировщиками и т. д. Это может быть необходимо для решения спорных вопросов, обсуждения деталей, сроков, предложений по улучшению и прочих рабочих моментов.
Основные инструменты
Можно продемонстрировать инструменты на примере процесса создания сайта интернет-магазина. Все начинается с получения разработчиком соответствующей задачи и оценки сроков ее выполнения. На этом этапе developer может задать интересующие вопросы техническому директору или руководителю разработки (тимлиду). Когда нюансы и сроки предварительно оговорены, таски фиксируются в трекере задач. Какие трекеры сегодня используют:
— Яндекс.Трекер;
— Trello;
— YouTrack и другие.
Интернет-магазин — объемный проект. Для соблюдения сроков и повышения эффективности работы команды задание декомпозируют — разбивают на мелкие части.
При разработке отдельной функциональности все начинается с коммуникаций с дизайнером, т. к. надо изучить макет и выяснить все детали. Здесь используют графические редакторы:
— Sketch;
— Figma.
Далее можно приступать к написанию кода. Чаще всего используют специальные текстовые редакторы или среды разработки (IDE) — VS Code, WebStorm и пр.
Написанный код тестируют QA-инженеры. Они проверяют, соответствует ли фактический результат использования программы ожидаемому, качественно ли работает приложение, есть ли дефекты, какова степень серьезности найденных недостатков. Тут применяется как ручное, так и автоматизированное тестирование, иногда к автоматизированному тестированию привлекают веб-разработчика. Автотест может имитировать действия пользователя при покупке какого-нибудь товара в интернет-магазине, а результаты такого тестирования записываются в логи (обеспечивается журналирование процесса). При внесении изменений в код или изменении окружения происходит повторное тестирование (его называют регрессионным).
Найденные дефекты оформляются в баг-репорты и отправляются программисту для устранения. Все этапы фиксируются специальными инструментами. Для отслеживания багов используется Jira и прочие бак-трекинговые системы, для контроля версий создаваемого программного обеспечения применяют Git, Github.
При освоении профессии понадобятся следующие знания:
-
Верстка и программирование. Надо знать HTML, CSS, JavaScript. Вышеперечисленные технологии — лишь необходимая база. HTML — стандартизированный язык разметки страниц в интернете, CSS — каскадная таблица стилей, отвечающая за внешний вид, язык программирования JavaScript отвечает за реагирование элементов на пользовательские действия. Лучше всего, если освоение языков происходит в условиях реального проекта — тогда происходит освоение и сопутствующих инструментов: графических редакторов и редакторов кода, инструментов разработчика в web-браузере и т. п. Также стоит упомянуть PHP — это скриптовый язык программирования общего назначения, который активно применяется при разработке веба и создании динамических web-сайтов. Его знание позволяет работать с серверной частью.
-
Браузерные API. Application Programming Interface — интерфейсы, обеспечивающие взаимодействие. Пример: программист пишет код для сервиса стриминга музыки. Надо, чтобы мелодия останавливалась, если юзер снимает блютуз-наушники. Но вот незадача — в языке программирования JavaScript отсутствуют средства работы с Bluetooth. Проблема решается путем предоставления этих средств различными браузерами в виде API. Также в браузерах существуют API для взаимодействия с веб-камерой или для определения геолокации пользователя.
-
Фреймворки. Соответствующие фреймворки заметно упрощают разработку больших проектов, уменьшают затраты на их развитие и поддержку. Такие фреймворки, как React и Vue дают возможность представить интерфейс в виде набора отдельных компонентов. Единожды создав такой компонент, его можно будет применять и в других местах web-сайта и даже в других проектах.
-
Серверное взаимодействие. Требуется понимание работы HTTP-протокола и знание клиент-серверной архитектуры (особенностей взаимодействия клиента с серверов). Это даст возможность получать и отправлять данные —выполнять запросы (requests) и получать ответы (responses), а также настраивать взаимодействие со сторонними веб-сервисами в случае надобности.
-
Soft skills — личностные навыки. Не обойтись без высоких коммуникативных способностей, ведь придется много взаимодействовать с дизайнерами, менеджерами, коллегами по разработке, тестировщиками и другими людьми в компании. Также надо уметь спокойно относиться к конструктивной критике, быть готовым устранить ошибки и недоработки, быть способным к адекватной оценке поставленных тасков, уметь правильно планировать свое время и выдерживать сроки. Чтобы достичь успеха и стать действительно профессионалом, нужно иметь большое стремление к постоянному развитию и совершенствованию своих навыков.
Какое количество времени понадобится для обучения, зависит от исходного уровня знаний. Освоить все необходимое одному можно, но это произойдет не за один день. Если вы начнете тратить не меньше 10 часов на обучение еженедельно, то приблизительно через полгода вы существенно продвинетесь в своих знаниях. Также может помочь платный курс, но тут надо быть очень внимательным с выбором, т. к. качество курсов различается, что зависит и от образовательной онлайн-платформы, и от преподавательского состава. Не будет лишним и заранее просмотреть несколько интересующих вакансий на рынке труда — это поможет узнать актуальные требования работодателей и понять, какие навыки надо подтянуть.
По материалам статей:
- https://academy.yandex.ru/posts/chem-zanimaetsya-veb-razrabotchik-i-kak-nachat-rabotat-v-etoy-oblasti;
- https://checkroi.ru/blog/professiya-veb-razrabotchik/.
<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title>Чем занимается web-разработчик? OTUS</title>
<!-- All in One SEO 4.5.2.1 - aioseo.com -->
<meta name="description" content="В этой статье пойдет разговор о том, кто такой веб-разработчик и чем он занимается. Отдельное внимание уделим навыкам, которыми должен обладать такой специалист. Веб-разработчик — кто это? Современный разработчик web-приложений занимается разработкой сайтов, онлайн-сервисов и соответствующего ПО. Это как раз тот случай, когда слово web говорит само за себя. Для справки: Web переводится с английского" />
<meta name="robots" content="max-image-preview:large" />
<link rel="canonical" href="https://otus.ru/journal/chem-zanimaetsya-web-razrabotchik/" />
<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
<script type="application/ld+json" class="aioseo-schema">
{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#article","name":"\u0427\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? OTUS","headline":"\u0427\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a?","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2020\/12\/oj-1080x720-12.png","width":1080,"height":720},"datePublished":"2020-12-18T20:17:37+00:00","dateModified":"2021-01-20T13:05:51+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#webpage"},"articleSection":"\u041f\u0440\u043e IT"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#listItem","position":2,"name":"\u0427\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a?","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#webpage","url":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/","name":"\u0427\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? OTUS","description":"\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u043e \u0442\u043e\u043c, \u043a\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u0447\u0435\u043c \u043e\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0443\u0434\u0435\u043b\u0438\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442. \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u2014 \u043a\u0442\u043e \u044d\u0442\u043e? \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0441\u0430\u0439\u0442\u043e\u0432, \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u041f\u041e. \u042d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0441\u043b\u043e\u0432\u043e web \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c\u043e \u0437\u0430 \u0441\u0435\u0431\u044f. \u0414\u043b\u044f \u0441\u043f\u0440\u0430\u0432\u043a\u0438: Web \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2020\/12\/oj-1080x720-12.png","@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#mainImage","width":1080,"height":720},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/chem-zanimaetsya-web-razrabotchik\/#mainImage"},"datePublished":"2020-12-18T20:17:37+00:00","dateModified":"2021-01-20T13:05:51+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
</script>
<!-- All in One SEO -->
<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/274" /><link rel='shortlink' href='https://otus.ru/journal/?p=274' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F&format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
<style type="text/css" id="wp-custom-css">
#menu-item-10406 .wpel-icon {
display: none;
}
#menu-item-10407 .wpel-icon {
display: none;
}
.otus-login-site a .wpel-icon {
display: none;
}
.menu-menju-navykov-container a .wpel-icon {
display: none;
}
.otus-login-site a
{
background: #ffd709;
border-radius: 12px;
color: #0f0f10;
font-size: 14px;
font-weight: 700;
line-height: 20px;
display: block;
text-align: center;
padding: 8px 25px;
}
.main-footer.dark {
background: linear-gradient(90deg, #a64fc5, #4f54e6);
border-color: transparent;
}
.main-footer.bold .copyright {
color: #fff;
}
.main-footer.bold .to-top i {
color: #fff;
}
.main-footer.bold .back-to-top {
color: #fff;
}
.nav__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scrollable-menu .menu {
display: flex;
}
.nav__scroll
{
background: linear-gradient(90deg, #a64fc5, #4f54e6);
}
.scrollable-menu .menu .menu-item {
flex: 0 0 auto;
padding: 15px 15px;
}
.scrollable-menu .menu .menu-item a {
color: #fff;
}
.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}
.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}
.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/
body {
min-width: 320px;
}
.banner-click img {
margin: 0 auto;
display: block;
}
.banner-click {
cursor: pointer;
}
.banner-footer-area {
margin-bottom: 20px;
}
.banner-left-area {
margin-top: 40px;
} </style>
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
//event.detail.contactFormId;
if(ym){
//console.log(event.detail);
ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
ym(34531570, 'params', {
page_url: window.location.href,
status: event.detail.status,
locale: event.detail.contactFormLocale,
form_id: event.detail.contactFormId,
});
}
}, false );
</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->
</head>
<body class="post-template-default single single-post postid-274 single-format-standard right-sidebar lazy-normal has-lb">
<div class="main-wrap">
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">
<div class="inner inner-head" data-sticky-bar="0">
<div class="wrap cf wrap-head">
<div class="left-contain">
<span class="mobile-nav"><i class="fa fa-bars"></i></span>
<div class="title">
<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
</a>
</div>
</div>
<div class="navigation-wrap inline">
<nav class="navigation inline simple light" data-sticky-bar="0">
<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </nav>
</div>
<div class="actions">
<div class="otus-login-site">
<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
</header> <!-- .main-head -->
<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
<div class="container wrap">
<div class="links inline simple light scrollable-menu">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
</div>
</div>
<div class="main wrap">
<div class="ts-row cf">
<div class="col-8 main-content cf">
<article id="post-274" class="the-post post-274 post type-post status-publish format-standard has-post-thumbnail category-pro-it">
<header class="post-header the-post-header cf">
<div class="post-meta the-post-meta">
<span class="post-cat">
<a href="https://otus.ru/journal/category/pro-it/" class="category" data-wpel-link="internal">Про IT</a>
</span>
<h1 class="post-title">
Чем занимается web-разработчик?
</h1>
<a href="https://otus.ru/journal/chem-zanimaetsya-web-razrabotchik/" class="date-link" data-wpel-link="internal"><time class="post-date">18 декабря, 2020</time></a>
</div>
<div class="featured">
<a href="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12.png" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Чем занимается web-разработчик?" title="Чем занимается web-разработчик?" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-270x180.png 270w" data-src="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-12-770x515.png" data-sizes="(max-width: 770px) 100vw, 770px" /> </a>
</div>
</header><!-- .post-header -->
<div class="post-content description cf entry-content content-normal">
<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA_%E2%80%94_%D0%BA%D1%82%D0%BE_%D1%8D%D1%82%D0%BE" title="Веб-разработчик — кто это?">Веб-разработчик — кто это?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8_%D1%80%D0%B5%D1%88%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%BC" title="Задачи, решаемые веб-разработчиком ">Задачи, решаемые веб-разработчиком </a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%A1%D1%82%D0%B0%D0%B4%D0%B8%D0%B8_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B" title="Стадии работы">Стадии работы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B" title="Основные инструменты">Основные инструменты</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%A7%D1%82%D0%BE_%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE_%D1%83%D0%BC%D0%B5%D1%82%D1%8C_web-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D1%83" title="Что важно уметь web-разработчику?">Что важно уметь web-разработчику?</a></li></ul></nav></div>
<p>В этой статье пойдет разговор о том, кто такой <strong>веб-разработчик</strong> и чем он занимается. Отдельное внимание уделим навыкам, которыми должен обладать такой специалист.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA_%E2%80%94_%D0%BA%D1%82%D0%BE_%D1%8D%D1%82%D0%BE"></span>Веб-разработчик — кто это?<span class="ez-toc-section-end"></span></h2>
<p>Современный разработчик web-приложений занимается <strong>разработкой сайтов</strong>, онлайн-сервисов и соответствующего ПО. Это как раз тот случай, когда слово web говорит само за себя.</p>
<p><em>Для справки: <strong>Web </strong>переводится с английского как «паутина». Речь идет о глобальном интернет-пространстве — всемирной системе объединенных компьютерных сетей, предназначенных для хранения/передачи/обмена информацией.</em></p>
<p>Сегодня, когда упоминают веб-разработчика, чаще всего имеют виду фронтендера, который имеет представление и о бэкенде. В большинстве случаев именно фронтенд-разработка является основной прерогативой такого специалиста и именно фронтенд является большей частью работы. Однако в современных реалиях веб-разработчику все чаще надо разрабатывать еще и бэкенд — если не весь, то какие-либо его части (типичный пример — задачи, решаемые веб-разработчиком с помощью Node.js). Фронтенд — то, что видит пользователь, бэкенд — то, что остается за пределом видимости (серверная часть); подробнее об этих понятиях можно почитать <a href="https://otus.ru/journal/frontend-i-bekend-razrabotka-kakie-navyki-nuzhny-i-kakoe-napravlenie-vybrat/" data-wpel-link="internal">здесь</a>.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8_%D1%80%D0%B5%D1%88%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%BC"></span>Задачи, решаемые веб-разработчиком <strong></strong><span class="ez-toc-section-end"></span></h2>
<p>На практике это:</p>
<p>— создание онлайн-сервисов;</p>
<p>— создание новых сайтов, поддержка/модернизация/дополнение уже существующих сайтов;</p>
<p>— создание веб-приложений.</p>
<p>С результатом такой работы ежедневно сталкивается почти каждый, кто пользуется:</p>
<p>— социальными сетями;</p>
<p>— развлекательными онлайн-порталами;</p>
<p>— банковским программным обеспечением;</p>
<p>— сервисами по просмотру видео;</p>
<p>— другими приложениями, программами и сайтами, работающими как на персональных компьютерах, так и на мобильных гаджетах.</p>
<p>Весь этот софт связывает термин <strong>Web</strong> — понятие, подразумевающее огромную вселенную, существующую в интернете. Отсюда вытекает простой вывод — разработчик с такой специальностью решает задачи, связанные с <strong>web-программированием</strong> (веб-разработкой).</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B0%D0%B4%D0%B8%D0%B8_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B"></span>Стадии работы<span class="ez-toc-section-end"></span></h2>
<p>Как все выглядит на реальном проекте? Если простыми словами, то веб-разработчик выполняет следующие действия:</p>
<p>— изучает задачу, поставленную заказчиком;</p>
<p>— участвует в создании оптимального решения;</p>
<p>— разрабатывает код для фронтенда/бэкенда;</p>
<p>— исправляет ошибки после тестирования программного обеспечения;</p>
<p>— развертывает код на сервере.</p>
<p>Общий цикл разработки, а также основные стадии и используемые инструменты продемонстрированы на картинке ниже:</p>
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="227" src="https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1-1024x227.png" alt="Чем занимается web-разработчик?" class="wp-image-275" srcset="https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1-1024x227.png 1024w, https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1-300x66.png 300w, https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1-150x33.png 150w, https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1-768x170.png 768w, https://otus.ru/journal/wp-content/uploads/2020/12/Screenshot_1-1.png 1210w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p>Не будет лишним рассмотреть этот процесс с точки зрения разницы между бэкенд- и фронтенд-задачами на примере:</p>
<p>1.Веб-разработчику дали задание <strong>создать адаптивный лендинг для сайта </strong>продукта. Роли следующие:</p>
<ul><li><strong>бэкендер</strong>. Создает код для сбора и хранения информации, которую пользователи оставляют на лендинге через форму обратной связи;</li><li><strong>фронтендер</strong>. Выполняет верстку макета лендинга сайта с учетом кроссбраузерности и кроссплатформенности (на разных устройствах и в разных браузерах все компоненты должны выглядеть корректно и в соответствии с требованиями).</li></ul>
<p>2.Вторая задача — <strong>интеграция на сайт платежной системы</strong>:</p>
<ul><li><strong>бэкендер</strong>. Создает структуру, обеспечивающую фиксацию данных о переводах средств, передачу этих данных в финансовое учреждение, оповещение пользователей и (или) владельцев сервиса;</li><li><strong>фронтендер</strong>. Внедряет решение непосредственно на сайте либо в application, отвечает за корректную работу всего функционала (интерфейс приложения должен адекватно реагировать на действия пользователя, выдавать сообщения об ошибках/выполненных операциях).</li></ul>
<p>3.Последний таск — <strong>создание интерфейса для регистрации и авторизации</strong>:</p>
<ul><li><strong>бэкендер</strong>. Отвечает за обработку данных и их передачу на сервер с последующим сохранением, обеспечивает защиту данных;</li><li><strong>фронтендер</strong>. Отвечает за всю видимую (внешнюю) часть приложения: анимацию, функциональные кнопки и т. п.</li></ul>
<p>В процессе решения поставленных задач веб-разработчику приходится тесно взаимодействовать и с другими членами команды: дизайнерами, менеджером, тестировщиками и т. д. Это может быть необходимо для решения спорных вопросов, обсуждения деталей, сроков, предложений по улучшению и прочих рабочих моментов.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span>Основные инструменты<span class="ez-toc-section-end"></span></h2>
<p>Можно продемонстрировать инструменты на примере процесса создания сайта <strong>интернет-магазина</strong>. Все начинается с получения разработчиком соответствующей задачи и оценки сроков ее выполнения. На этом этапе developer может задать интересующие вопросы техническому директору или руководителю разработки (тимлиду). Когда нюансы и сроки предварительно оговорены, таски фиксируются в трекере задач. Какие трекеры сегодня используют:</p>
<p>— Яндекс.Трекер;</p>
<p>— Trello;</p>
<p>— YouTrack и другие.</p>
<p>Интернет-магазин — объемный проект. Для соблюдения сроков и повышения эффективности работы команды задание <strong>декомпозируют </strong>— разбивают на мелкие части.</p>
<p>При разработке отдельной функциональности все начинается с коммуникаций с дизайнером, т. к. надо изучить макет и выяснить все детали. Здесь используют графические редакторы:</p>
<p>— Sketch;</p>
<p>— Figma.</p>
<p>Далее можно приступать к <strong>написанию кода</strong>. Чаще всего используют специальные текстовые редакторы или среды разработки (IDE) — VS Code, WebStorm и пр.</p>
<p>Написанный код <strong>тестируют</strong> QA-инженеры. Они проверяют, соответствует ли фактический результат использования программы ожидаемому, качественно ли работает приложение, есть ли дефекты, какова степень серьезности найденных недостатков. Тут применяется как ручное, так и автоматизированное тестирование, иногда к автоматизированному тестированию привлекают веб-разработчика. Автотест может имитировать действия пользователя при покупке какого-нибудь товара в интернет-магазине, а результаты такого тестирования записываются в логи (обеспечивается журналирование процесса). При внесении изменений в код или изменении окружения происходит повторное тестирование (его называют регрессионным). </p>
<p>Найденные дефекты оформляются в баг-репорты и отправляются программисту для устранения. Все этапы фиксируются специальными инструментами. Для отслеживания багов используется Jira и прочие бак-трекинговые системы, для контроля версий создаваемого программного обеспечения применяют Git, Github.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE_%D1%83%D0%BC%D0%B5%D1%82%D1%8C_web-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D1%83"></span>Что важно уметь web-разработчику?<span class="ez-toc-section-end"></span></h2>
<p>При освоении профессии понадобятся следующие знания:</p>
<ol type="1"><li><strong>Верстка и программирование.</strong> Надо знать HTML, CSS, JavaScript. Вышеперечисленные технологии — лишь необходимая база. HTML — стандартизированный язык разметки страниц в интернете, CSS — каскадная таблица стилей, отвечающая за внешний вид, язык программирования JavaScript отвечает за реагирование элементов на пользовательские действия. Лучше всего, если освоение языков происходит в условиях реального проекта — тогда происходит освоение и сопутствующих инструментов: графических редакторов и редакторов кода, инструментов разработчика в web-браузере и т. п. Также стоит упомянуть <strong>PHP</strong> — это скриптовый язык программирования общего назначения, который активно применяется при разработке веба и создании динамических web-сайтов. Его знание позволяет работать с серверной частью.</li><li><strong>Браузерные API. </strong>Application Programming Interface — интерфейсы, обеспечивающие взаимодействие. Пример: программист пишет код для сервиса стриминга музыки. Надо, чтобы мелодия останавливалась, если юзер снимает блютуз-наушники. Но вот незадача — в языке программирования JavaScript отсутствуют средства работы с Bluetooth. Проблема решается путем предоставления этих средств различными браузерами в виде API. Также в браузерах существуют API для взаимодействия с веб-камерой или для определения геолокации пользователя.</li><li><strong>Фреймворки.</strong> Соответствующие фреймворки заметно упрощают разработку больших проектов, уменьшают затраты на их развитие и поддержку. Такие фреймворки, как React и Vue дают возможность представить интерфейс в виде набора отдельных компонентов. Единожды создав такой компонент, его можно будет применять и в других местах web-сайта и даже в других проектах.</li><li><strong>Серверное взаимодействие. </strong>Требуется понимание работы HTTP-протокола и знание клиент-серверной архитектуры (особенностей взаимодействия клиента с серверов). Это даст возможность получать и отправлять данные —выполнять запросы (requests) и получать ответы (responses), а также настраивать взаимодействие со сторонними веб-сервисами в случае надобности.</li><li><strong>Soft skills — личностные навыки</strong>. Не обойтись без высоких коммуникативных способностей, ведь придется много взаимодействовать с дизайнерами, менеджерами, коллегами по разработке, тестировщиками и другими людьми в компании. Также надо уметь спокойно относиться к конструктивной критике, быть готовым устранить ошибки и недоработки, быть способным к адекватной оценке поставленных тасков, уметь правильно планировать свое время и выдерживать сроки. Чтобы достичь успеха и стать действительно профессионалом, нужно иметь большое стремление к постоянному развитию и совершенствованию своих навыков. </li></ol>
<p>Какое количество времени понадобится для обучения, зависит от исходного уровня знаний. Освоить все необходимое одному можно, но это произойдет не за один день. Если вы начнете тратить не меньше 10 часов на обучение еженедельно, то приблизительно через полгода вы существенно продвинетесь в своих знаниях. Также может помочь платный курс, но тут надо быть очень внимательным с выбором, т. к. качество курсов различается, что зависит и от образовательной онлайн-платформы, и от преподавательского состава. Не будет лишним и заранее просмотреть несколько интересующих вакансий на рынке труда — это поможет узнать актуальные требования работодателей и понять, какие навыки надо подтянуть.</p>
<p><em>По материалам статей:</em></p>
<ul><li><em>https://academy.yandex.ru/posts/chem-zanimaetsya-veb-razrabotchik-i-kak-nachat-rabotat-v-etoy-oblasti;</em></li><li><em>https://checkroi.ru/blog/professiya-veb-razrabotchik/.</em></li></ul>
</div><!-- .post-content -->
<div class="the-post-foot cf">
<div class="tag-share cf">
<div class="post-share">
<div class="post-share-icons cf">
<span class="counters">
</span>
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F&text=%D0%A7%D0%B5%D0%BC%20%D0%B7%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D0%B5%D1%82%D1%81%D1%8F%20web-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%3F" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchem-zanimaetsya-web-razrabotchik%2F&media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2020%2F12%2Foj-1080x720-12.png&description=%D0%A7%D0%B5%D0%BC%20%D0%B7%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D0%B5%D1%82%D1%81%D1%8F%20web-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%3F" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
</div>
</div>
</div>
<div class="post-nav">
<div class="post previous cf">
<a href="https://otus.ru/journal/ustanovka-pip-na-python-3-bazovye-komandy/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-left"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/ustanovka-pip-na-python-3-bazovye-komandy/" class="image-link" rel="previous" data-wpel-link="internal">
<img width="150" height="100" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20100%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Установка PIP на Python 3. Базовые команды" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-768x512.png 768w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-370x245.png 370w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13.png 1080w" data-src="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-13-150x100.png" data-sizes="(max-width: 150px) 100vw, 150px" title="Установка PIP на Python 3. Базовые команды" /> </a>
<div class="post-meta">
<span class="label">Prev Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/ustanovka-pip-na-python-3-bazovye-komandy/" data-wpel-link="internal">Установка PIP на Python 3. Базовые команды</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/ustanovka-pip-na-python-3-bazovye-komandy/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2020-12-17T20:35:12+00:00">17 декабря, 2020</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">5 Mins Read</span>
</div>
</div> </div>
</span>
</div>
<div class="post next cf">
<a href="https://otus.ru/journal/vidy-i-harakteristiki-algoritmov/" title="Next Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-right"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/vidy-i-harakteristiki-algoritmov/" class="image-link" rel="next" data-wpel-link="internal">
<img width="150" height="100" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20100%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Виды и характеристики алгоритмов" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-768x512.png 768w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-370x245.png 370w, https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11.png 1080w" data-src="https://otus.ru/journal/wp-content/uploads/2020/12/oj-1080x720-11-150x100.png" data-sizes="(max-width: 150px) 100vw, 150px" title="Виды и характеристики алгоритмов" /> </a>
<div class="post-meta">
<span class="label">Next Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/vidy-i-harakteristiki-algoritmov/" data-wpel-link="internal">Виды и характеристики алгоритмов</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/vidy-i-harakteristiki-algoritmov/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2020-12-21T20:14:43+00:00">21 декабря, 2020</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">4 Mins Read</span>
</div>
</div> </div>
</span>
</div>
</div>
<section class="related-posts grid-3">
<h4 class="section-head"><span class="title">Читать ещё</span></h4>
<div class="ts-row posts cf">
<article class="post col-4">
<a href="https://otus.ru/journal/proekt-tg-autoposter-na-nest-js/" title="Проект «TG Autoposter на Nest.JS»" class="image-link" data-wpel-link="internal">
</a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/proekt-tg-autoposter-na-nest-js/" class="post-link" data-wpel-link="internal">Проект «TG Autoposter на Nest.JS»</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-12-23T00:44:53+00:00">23 декабря, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/langtrainee-razrabotka-mvp-ai-platformy-dlya-personalizirovannogo-izucheniya-yazykov/" title="LangTrainee: разработка MVP AI-платформы для персонализированного изучения языков" class="image-link" data-wpel-link="internal">
</a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/langtrainee-razrabotka-mvp-ai-platformy-dlya-personalizirovannogo-izucheniya-yazykov/" class="post-link" data-wpel-link="internal">LangTrainee: разработка MVP AI-платформы для персонализированного изучения языков</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-12T04:39:47+00:00">12 ноября, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/pochemu-my-ne-uhodim-iz-it-dazhe-kogda-hochetsya/" title="Почему мы не уходим из IT даже когда хочется" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Почему мы не уходим из IT даже когда хочется" title="Почему мы не уходим из IT даже когда хочется" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-1-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-1-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-1-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-1-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/pochemu-my-ne-uhodim-iz-it-dazhe-kogda-hochetsya/" class="post-link" data-wpel-link="internal">Почему мы не уходим из IT даже когда хочется</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-04T12:29:53+00:00">4 ноября, 2025</time>
</div>
</div>
</article >
</div>
</section>
</article> <!-- .the-post -->
</div>
<aside class="col-4 sidebar">
<div class="inner">
<ul>
<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
<form method="get" class="search-form" action="https://otus.ru/journal/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
</label>
<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>
</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
</ul>
</div>
</aside>
</div> <!-- .ts-row -->
</div> <!-- .main -->
<footer class="main-footer dark bold">
<section class="lower-footer cf">
<div class="wrap">
<div class="links">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
<p class="copyright"> © 2015-2026 OTUS </p>
<div class="to-top">
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
</div>
</div>
</section>
</footer>
</div> <!-- .main-wrap -->
<div class="mobile-menu-container off-canvas" id="mobile-menu">
<a href="#" class="close"><i class="fa fa-times"></i></a>
<div class="logo">
</div>
<ul class="mobile-menu"></ul>
</div>
<div class="search-modal-wrap">
<div class="search-modal-box" role="dialog" aria-modal="true">
<form method="get" class="search-form" action="https://otus.ru/journal/">
<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />
<button type="submit" class="search-submit visuallyhidden">Submit</button>
<p class="message">
Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel. </p>
</form>
</div>
</div>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/chem-zanimaetsya-web-razrabotchik\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>
</body>
</html>
<!-- Cache served by breeze CACHE - Last modified: Tue, 10 Mar 2026 16:26:08 GMT -->