HTML Academy

+141

с 2019

Курсы для каждого, кто хочет окунуться в мир вёрстки и программирования.

171 подписчик

0 подписок

HTML Academy

Медиа

19.10.2021

9 подкастов о веб-разработке на русском

В 2021 куда ни глянь, везде подкасты обо всём на свете — о воспитании детей, кино и автомобилях. Но мы же здесь занимаемся веб-разработкой, поэтому собрали подборку подкастов, которые помогут вам разобраться, что вообще происходит в индустрии.

В каждом из пунктов приводим названия трёх последних выпусков, которые вышли на момент публикации ст…

HTML Academy

31.05.2021

Что такое семантическая вёрстка и зачем она нужна

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

HTML Academy

Личный опыт

29.04.2021

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

HTML Academy

Дизайн

10.03.2021

Что должно быть в макете сайта: шпаргалка для дизайнера

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

«Я никогда не научусь верстать» и другие мифы о разработке

За 15 лет я успел забыть, что и так можно было HTML Academy

HTML Academy

Разработка

31.01.2021

12 полезных книг по JavaScript

Серия «Вы не знаете JavaScript», книга с носорогом, «Чистый код» и другая классика для веб-разработчиков.

HTML Academy

Карьера

31.01.2021

10 правил онлайн-собеседований

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

HTML Academy

Образование

24.11.2020

Математика и много непонятных слов. Разбираемся насколько сложно стать программистом

Знакомьтесь, это Серёжа, продавец мебели из Москвы. Ему почти 30 лет, и он сомневается, нужно ли ему быть веб-разработчиком. Потому что может и так нормально?

Серёжа продаёт шкафы и попутно сомневается htmlacademy.ru

HTML Academy

Личный опыт

10.09.2020

Как создаются интерактивные курсы. Разбираем поэтапно

HTML Academy

Разработка

25.08.2020

Пишем Телеграм-бота на JavaScript

Сегодня будем делать бота — это отличное (и быстрое) занятие, которое развивает уставший мозг и даёт возможность отправить друзьям ссылочку со словами «Смотри, это моё».

HTML Academy

Карьера

23.07.2020

Как найти работу начинающему программисту. 6 советов для джуна

Рассказывает Наталья Ёркина, тимлид из Ostrovok.ru. Полное интервью с Натальей можно посмотреть тут.

HTML Academy

Карьера

26.06.2020

«Вы просто нажимаете на кнопки, любой так может». 18 глупых вопросов тестировщику

Мы задаём глупые вопросы профессионалам, с которыми верстальщики часто сталкиваются в работе.

Наш первый гость — Михаил, специалист по тестированию из Яндекс.Денег. Мы расспросили его о работе тестировщика и о том, что тестировщиков бесит в программистах.

\n","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Основные семантические теги HTML"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<article>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.","Особенности: желателен заголовок внутри.","Типовые ошибки: путают с тегами <section> и <div>."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<section>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: смысловой раздел документа. Неотделяемый, в отличие от .","Особенности: желателен заголовок внутри.","Типовые ошибки: путают с тегами <article> и <div>."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<aside>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: побочный, косвенный для страницы контент.","Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.","Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<nav>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.","Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.","Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<header>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.","Особенности: этих элементов может быть несколько на странице.","Типовые ошибки: использовать только как шапку сайта."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<main>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: основное, не повторяющееся на других страницах, содержание страницы.","Особенности: должен быть один на странице, исходя из определения.","Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее)."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"<footer>"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.","Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.","Типовые ошибки: использовать только как подвал сайта."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Как разметить страницу с точки зрения семантики"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.","Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.","Заголовок всего документа и заголовки смысловых разделов. Теги: <h1>-<h6>.","Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.","Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Сомневаюсь, какие теги использовать"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Есть простые правила для выбора нужных тегов.

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Получилось найти самый подходящий смысловой тег — использовать его.","Для потоковых контейнеров — <div>.","Для мелких фразовых элементов (слово или фраза) — <span>."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Правило для определения <article>, <section> и <div>:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>","Можете дать имя разделу, но вынести на другой сайт не можете? — <section>","Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>"],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Как точно не нужно делать"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Не используйте семантические теги для украшательств. Для этого есть CSS.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"d0d64673-7c2d-5394-ae3c-74f0f911c6a3","width":1788,"height":695,"size":33319,"type":"png","color":"232323","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Здесь сразу несколько ошибок:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.","Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.","Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поэтому используйте семантические теги по назначению.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"ba6119ff-0694-52ea-a018-21e0d042693d","width":2090,"height":781,"size":63634,"type":"png","color":"242424","hash":"","external_service":[]}}}]}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":5,"reposts":0,"views":140,"hits":5636,"reads":null,"online":0},"dateFavorite":0,"hitsCount":5636,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id300624/252807-chto-takoe-semanticheskaya-verstka-i-zachem-ona-nuzhna","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":5}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":240264,"customUri":null,"subsiteId":300624,"title":"Не лезьте в геймдев, он вас сожрёт (но вам понравится)","date":1619686998,"dateModified":1619686998,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Не зря говорят, что геймдев безжалостен (и особенно к новичкам).","image":{"type":"image","data":{"uuid":"9bdb1298-45cc-503c-98a0-fbeaa212eee9","width":1318,"height":744,"size":138468,"type":"jpg","color":"1c1b20","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Скорее всего, вы слышали от кого-нибудь про тренажёры по вёрстке и программированию от Академии. Мы делаем ещё много всего, но интерактивные курсы — путевая точка, через которую проходили почти все русскоязычные фронтендеры (по крайней мере, я на это надеюсь).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

«Ну замахнулись и замахнулись, зачем об этом писать?» — подумает читатель и будет прав. То есть технически мы уже шестой год делаем какие-то новогодние игры, но только в 2021 попробовали сделать полноценную онлайн-игру с экономикой, рейдами, боссами и всем таким, мморпгшным.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

То есть представьте: игроки делятся на 170 гильдий, каждая со своим чатом, нужно победить 7 боссов (у каждого своя история и локация), а ещё для самых бодрых работает ПвП-арена. А кор-механика — тренажёры по вёрстке, JavaScript и PHP. То есть быстро и много решаешь — супер, так держать. Тому, кто решал быстрее и больше всех, даже выдали бесплатное обучение на профессии, которое в мирное время стоит ого-го сколько. Ну и все тренажёры тоже бесплатные, даже те, которые обычно платные.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Я смотрел в грустные глаза наших разработчиков примерно два месяца — весь ноябрь и декабрь 2020 ушли на разработку. На фронте React, на бэкенде PHP и Slim Framework. Для игры выделили выделенный сервер: 1 CPU, 2 Gb Ram, 50 GB HDD (чувствуете надвигающиеся грабли, да?).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Казалось бы, что может пойти не так. А пошло примерно всё (разве что, в отличие от настоящего cyberpunk 2077, релиз не перенесли). И перед тем, как начать второй сезон (хотфикс, если хотите), мы решили этим поделиться, чтобы вы не повторяли наших ошибок.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 1. Вовлечение игроков"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Основная механика: решать задания по вёрстке и умнеть. Хорошо, если получится заработать за решение достаточно игровой валюты и забрать в игровом магазине главный приз, который существует в единственном экземпляре. Ну или потратить всё на скидки на другие продукты.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Главная грабля: мы недооценили упорство людей. Игроки решали задачи без перерывов на сон и отдых (и это 1 января!), в итоге главный приз был получен за считанные часы. За него всерьёз боролись два участника, и один из них просто пошёл часок подремать. В это время всё и случилось.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Мы даже взяли интервью у победителя — говорит, пил воду, ел пиццу, решал задания. Ничего необычного.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"8c4d0634-160c-53d6-be7f-5d561d478280","width":888,"height":352,"size":20182,"type":"png","color":"d1e0e4","hash":"","external_service":[]}}}]}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Продумывайте заранее, чем вы будете удерживать людей в игре.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 2. Так себе экономика"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Уровни и внутреннюю валюту — киберкоины — можно было получить за много чего. Просто решать задачи, сражаться на арене с другими игроками, валить боссов. Заработанные деньги можно было потратить в магазине: там продавались скидки на курсы, подписку, навыки и проекты по вёрстке.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Но мы не очень внимательно посчитали, сколько валюты сможет получить каждый участник. В итоге денег на рынке было настолько много, что все, кто хотели что-то купить, купили это в первые 2-3 дня. Больше им предложить было нечего.

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 3. Читеры"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

С читерами в онлайн-играх борются все, и если вы когда-нибудь делали онлайн-игру, вы меня поймёте. В нашем случае читеры работали с двух сторон — на арене и вообще в заданиях.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Арена устроена так:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Два человека получают одно и то же задание — сверстать или запрограммировать что-то.","Кто быстрее сделал, тот и победил. Деньги, слава, вот это всё."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Главная читерная механика была такая

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["У каждой из 170 гильдий был свой чат в телеграме.","Участники сливали ответы на задания в чатах.","Люди заходили на арену, видели задание, быстро искали его в чате, и копипастили результат."],"type":"UL"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Кто-то додумался, да","image":{"type":"image","data":{"uuid":"c7b9c55e-ccca-5bad-83c0-32d751e30cdd","width":1013,"height":189,"size":50628,"type":"png","color":"d9e1e6","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Всегда будут игроки, которые попытаются вас обмануть. От этого никуда не деться, но лучше сразу отрезать очевидные места для читерства.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 4 . Игровой баланс"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В игре было 7 боссов — каждый день проходил рейд, где собирались все участники, решали задания и наносили урон боссам. Чем больше людей валят босса вместе, тем больше итоговый приз за победу. При этом каждый день боссы становятся всё сильнее, то есть нужно было собрать больше людей, чтобы их победить.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Бабка — один из боссов","image":{"type":"image","data":{"uuid":"02bcc617-0e94-5b2f-a5a4-07ca18a76fb9","width":983,"height":112,"size":22488,"type":"png","color":"d8dfe3","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Во втором сезоне боссов будет всего два, а ещё мы пересчитали экономику, чтобы не было, как в прошлый раз. Ну и, конечно, первый приз будет уходить только после победы над последним боссом.

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

На баланс влияют все части игры — тут важны и экономика, и мета, и вовлечение. Если где-то перекос, то всё упадёт.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это всё, что касалось геймдизайна. Но не геймдизайном единым.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 5. А что тут вообще происходит?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это моя личная редакторская боль.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Какая-то из итераций","image":{"type":"image","data":{"uuid":"a5037ff0-4426-5b43-825e-189e53d22546","width":1600,"height":691,"size":99512,"type":"png","color":"24242a","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Во втором сезоне упростили ещё — для этого в таск-трекере появилась задача «Переписать текст главной страницы так, чтобы его понял даже медведь». Ну и переписали.

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Перепишите тексты так, чтобы их понял даже медведь

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Грабли № 6. Технические проблемы"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сами себя заддосили. Уже после запуска разработчикам пришлось допиливать архитектуру. Некоторые места были написаны так, что при одном заходе на страницу рейда генерировалось несколько хитов, в итоге условные 1000 одновременных пользователей генерировали от 2 до 3 тысяч запросов к API. Для однопроцессорного сервера это оказалось чересчур и он снова торжественно прилёг, оставив разработчиков разбираться с этим в ночи.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Баги. Куда же без них. Свидетели говорят, что мониторинги звенели всю неделю. Случались кривые запросы, начисление очков не тем и не туда, undefined на проде (мама). Всю неделю разработка чинила разные баги — буквально днями и ночами — а поддержка поддерживала страждущих и заводила тикеты. В рабочих чатах было много интересных диалогов, которые всё равно из-за цензуры сюда постить нельзя.

"}},{"type":"tweet","cover":false,"hidden":false,"anchor":"","data":{"tweet":{"type":"tweet","data":{"tweet_data":{"created_at":"Fri Jan 01 19:42:20 +0000 2021","id":1345093016483205000,"id_str":"1345093016483205131","full_text":"На сайте @htmlacademy_ru проходит новогодняя битва HtmlPunk, в качестве награды за участие можно получить undefined коинов, присоединяйтесь если вы is not a function https://t.co/Tl9dqyzJiJ https://t.co/PERhZIMu3m","truncated":false,"display_text_range":[0,189],"entities":{"hashtags":[],"symbols":[],"user_mentions":[{"screen_name":"htmlacademy_ru","name":"HTML Academy","id":773276947,"id_str":"773276947","indices":[9,24]}],"urls":[{"url":"https://t.co/Tl9dqyzJiJ","expanded_url":"https://htmlacademy.ru","display_url":"htmlacademy.ru","indices":[166,189]}],"media":[{"id":1345093012842537000,"id_str":"1345093012842536960","indices":[190,213],"media_url":"http://pbs.twimg.com/media/Eqq69_RW4AA4wnt.jpg","media_url_https":"https://pbs.twimg.com/media/Eqq69_RW4AA4wnt.jpg","url":"https://t.co/PERhZIMu3m","display_url":"pic.twitter.com/PERhZIMu3m","expanded_url":"https://twitter.com/5minreact/status/1345093016483205131/photo/1","type":"photo","sizes":{"thumb":{"w":150,"h":150,"resize":"crop"},"small":{"w":344,"h":252,"resize":"fit"},"medium":{"w":344,"h":252,"resize":"fit"},"large":{"w":344,"h":252,"resize":"fit"}}}]},"extended_entities":{"media":[{"id":1345093012842537000,"id_str":"1345093012842536960","indices":[190,213],"media_url":"http://pbs.twimg.com/media/Eqq69_RW4AA4wnt.jpg","media_url_https":"https://leonardo.osnova.io/cfb1f00d-0636-56e2-bfe9-f85fd90e6a17/","url":"https://t.co/PERhZIMu3m","display_url":"pic.twitter.com/PERhZIMu3m","expanded_url":"https://twitter.com/5minreact/status/1345093016483205131/photo/1","type":"photo","sizes":{"thumb":{"w":150,"h":150,"resize":"crop"},"small":{"w":344,"h":252,"resize":"fit"},"medium":{"w":344,"h":252,"resize":"fit"},"large":{"w":344,"h":252,"resize":"fit"}}}]},"source":"Twitter for iPhone","in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id":800675127939600400,"id_str":"800675127939600385","name":"Пятиминутка React","screen_name":"5minreact","location":"Москва, Россия","description":"Подкаст о React и смежных технологиях в мире JavaScript","url":"https://t.co/hLRtB03wbI","entities":{"url":{"urls":[{"url":"https://t.co/hLRtB03wbI","expanded_url":"http://5minreact.ru","display_url":"5minreact.ru","indices":[0,23]}]},"description":{"urls":[]}},"protected":false,"followers_count":2488,"friends_count":142,"listed_count":35,"created_at":"Mon Nov 21 12:20:01 +0000 2016","favourites_count":74,"utc_offset":null,"time_zone":null,"geo_enabled":false,"verified":false,"statuses_count":652,"lang":null,"contributors_enabled":false,"is_translator":false,"is_translation_enabled":false,"profile_background_color":"000000","profile_background_image_url":"http://abs.twimg.com/images/themes/theme1/bg.png","profile_background_image_url_https":"https://abs.twimg.com/images/themes/theme1/bg.png","profile_background_tile":false,"profile_image_url":"http://pbs.twimg.com/profile_images/801387279931625473/H_K6O53Z_normal.jpg","profile_image_url_https":"https://leonardo.osnova.io/c01aaeae-0156-51a8-a774-04a5777d24bf/","profile_banner_url":"https://pbs.twimg.com/profile_banners/800675127939600385/1479900623","profile_link_color":"FAB81E","profile_sidebar_border_color":"000000","profile_sidebar_fill_color":"000000","profile_text_color":"000000","profile_use_background_image":false,"has_extended_profile":false,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":null,"notifications":null,"translator_type":"none","withheld_in_countries":[]},"geo":null,"coordinates":null,"place":null,"contributors":null,"is_quote_status":false,"retweet_count":0,"favorite_count":4,"favorited":false,"retweeted":false,"possibly_sensitive":false,"possibly_sensitive_appealable":false,"lang":"ru","processed_text":"На сайте @htmlacademy_ru проходит новогодняя битва HtmlPunk, в качестве награды за участие можно получить undefined коинов, присоединяйтесь если вы is not a function https://htmlacademy.ru https://t.co/PERhZIMu3m"},"tweet_data_encoded":"eyJjcmVhdGVkX2F0IjoiRnJpIEphbiAwMSAxOTo0MjoyMCArMDAwMCAyMDIxIiwiaWQiOjEzNDUwOTMwMTY0ODMyMDUxMzEsImlkX3N0ciI6IjEzNDUwOTMwMTY0ODMyMDUxMzEiLCJmdWxsX3RleHQiOiLQndCwINGB0LDQudGC0LUgQGh0bWxhY2FkZW15X3J1INC/0YDQvtGF0L7QtNC40YIg0L3QvtCy0L7Qs9C+0LTQvdGP0Y8g0LHQuNGC0LLQsCBIdG1sUHVuaywg0LIg0LrQsNGH0LXRgdGC0LLQtSDQvdCw0LPRgNCw0LTRiyDQt9CwINGD0YfQsNGB0YLQuNC1INC80L7QttC90L4g0L/QvtC70YPRh9C40YLRjCB1bmRlZmluZWQg0LrQvtC40L3QvtCyLCDQv9GA0LjRgdC+0LXQtNC40L3Rj9C50YLQtdGB0Ywg0LXRgdC70Lgg0LLRiyBpcyBub3QgYSBmdW5jdGlvbiBodHRwczpcL1wvdC5jb1wvVGw5ZHF5ekppSiBodHRwczpcL1wvdC5jb1wvUEVSaFpJTXUzbSIsInRydW5jYXRlZCI6ZmFsc2UsImRpc3BsYXlfdGV4dF9yYW5nZSI6WzAsMTg5XSwiZW50aXRpZXMiOnsiaGFzaHRhZ3MiOltdLCJzeW1ib2xzIjpbXSwidXNlcl9tZW50aW9ucyI6W3sic2NyZWVuX25hbWUiOiJodG1sYWNhZGVteV9ydSIsIm5hbWUiOiJIVE1MIEFjYWRlbXkiLCJpZCI6NzczMjc2OTQ3LCJpZF9zdHIiOiI3NzMyNzY5NDciLCJpbmRpY2VzIjpbOSwyNF19XSwidXJscyI6W3sidXJsIjoiaHR0cHM6XC9cL3QuY29cL1RsOWRxeXpKaUoiLCJleHBhbmRlZF91cmwiOiJodHRwczpcL1wvaHRtbGFjYWRlbXkucnUiLCJkaXNwbGF5X3VybCI6Imh0bWxhY2FkZW15LnJ1IiwiaW5kaWNlcyI6WzE2NiwxODldfV0sIm1lZGlhIjpbeyJpZCI6MTM0NTA5MzAxMjg0MjUzNjk2MCwiaWRfc3RyIjoiMTM0NTA5MzAxMjg0MjUzNjk2MCIsImluZGljZXMiOlsxOTAsMjEzXSwibWVkaWFfdXJsIjoiaHR0cDpcL1wvcGJzLnR3aW1nLmNvbVwvbWVkaWFcL0VxcTY5X1JXNEFBNHdudC5qcGciLCJtZWRpYV91cmxfaHR0cHMiOiJodHRwczpcL1wvcGJzLnR3aW1nLmNvbVwvbWVkaWFcL0VxcTY5X1JXNEFBNHdudC5qcGciLCJ1cmwiOiJodHRwczpcL1wvdC5jb1wvUEVSaFpJTXUzbSIsImRpc3BsYXlfdXJsIjoicGljLnR3aXR0ZXIuY29tXC9QRVJoWklNdTNtIiwiZXhwYW5kZWRfdXJsIjoiaHR0cHM6XC9cL3R3aXR0ZXIuY29tXC81bWlucmVhY3RcL3N0YXR1c1wvMTM0NTA5MzAxNjQ4MzIwNTEzMVwvcGhvdG9cLzEiLCJ0eXBlIjoicGhvdG8iLCJzaXplcyI6eyJ0aHVtYiI6eyJ3IjoxNTAsImgiOjE1MCwicmVzaXplIjoiY3JvcCJ9LCJzbWFsbCI6eyJ3IjozNDQsImgiOjI1MiwicmVzaXplIjoiZml0In0sIm1lZGl1bSI6eyJ3IjozNDQsImgiOjI1MiwicmVzaXplIjoiZml0In0sImxhcmdlIjp7InciOjM0NCwiaCI6MjUyLCJyZXNpemUiOiJmaXQifX19XX0sImV4dGVuZGVkX2VudGl0aWVzIjp7Im1lZGlhIjpbeyJpZCI6MTM0NTA5MzAxMjg0MjUzNjk2MCwiaWRfc3RyIjoiMTM0NTA5MzAxMjg0MjUzNjk2MCIsImluZGljZXMiOlsxOTAsMjEzXSwibWVkaWFfdXJsIjoiaHR0cDpcL1wvcGJzLnR3aW1nLmNvbVwvbWVkaWFcL0VxcTY5X1JXNEFBNHdudC5qcGciLCJtZWRpYV91cmxfaHR0cHMiOiJodHRwczpcL1wvbGVvbmFyZG8ub3Nub3ZhLmlvXC9jZmIxZjAwZC0wNjM2LTU2ZTItYmZlOS1mODVmZDkwZTZhMTdcLyIsInVybCI6Imh0dHBzOlwvXC90LmNvXC9QRVJoWklNdTNtIiwiZGlzcGxheV91cmwiOiJwaWMudHdpdHRlci5jb21cL1BFUmhaSU11M20iLCJleHBhbmRlZF91cmwiOiJodHRwczpcL1wvdHdpdHRlci5jb21cLzVtaW5yZWFjdFwvc3RhdHVzXC8xMzQ1MDkzMDE2NDgzMjA1MTMxXC9waG90b1wvMSIsInR5cGUiOiJwaG90byIsInNpemVzIjp7InRodW1iIjp7InciOjE1MCwiaCI6MTUwLCJyZXNpemUiOiJjcm9wIn0sInNtYWxsIjp7InciOjM0NCwiaCI6MjUyLCJyZXNpemUiOiJmaXQifSwibWVkaXVtIjp7InciOjM0NCwiaCI6MjUyLCJyZXNpemUiOiJmaXQifSwibGFyZ2UiOnsidyI6MzQ0LCJoIjoyNTIsInJlc2l6ZSI6ImZpdCJ9fX1dfSwic291cmNlIjoiPGEgaHJlZj1cImh0dHA6XC9cL3R3aXR0ZXIuY29tXC9kb3dubG9hZFwvaXBob25lXCIgcmVsPVwibm9mb2xsb3dcIj5Ud2l0dGVyIGZvciBpUGhvbmU8XC9hPiIsImluX3JlcGx5X3RvX3N0YXR1c19pZCI6bnVsbCwiaW5fcmVwbHlfdG9fc3RhdHVzX2lkX3N0ciI6bnVsbCwiaW5fcmVwbHlfdG9fdXNlcl9pZCI6bnVsbCwiaW5fcmVwbHlfdG9fdXNlcl9pZF9zdHIiOm51bGwsImluX3JlcGx5X3RvX3NjcmVlbl9uYW1lIjpudWxsLCJ1c2VyIjp7ImlkIjo4MDA2NzUxMjc5Mzk2MDAzODUsImlkX3N0ciI6IjgwMDY3NTEyNzkzOTYwMDM4NSIsIm5hbWUiOiLQn9GP0YLQuNC80LjQvdGD0YLQutCwIFJlYWN0Iiwic2NyZWVuX25hbWUiOiI1bWlucmVhY3QiLCJsb2NhdGlvbiI6ItCc0L7RgdC60LLQsCwg0KDQvtGB0YHQuNGPIiwiZGVzY3JpcHRpb24iOiLQn9C+0LTQutCw0YHRgiDQviBSZWFjdCDQuCDRgdC80LXQttC90YvRhSDRgtC10YXQvdC+0LvQvtCz0LjRj9GFINCyINC80LjRgNC1IEphdmFTY3JpcHQiLCJ1cmwiOiJodHRwczpcL1wvdC5jb1wvaExSdEIwM3diSSIsImVudGl0aWVzIjp7InVybCI6eyJ1cmxzIjpbeyJ1cmwiOiJodHRwczpcL1wvdC5jb1wvaExSdEIwM3diSSIsImV4cGFuZGVkX3VybCI6Imh0dHA6XC9cLzVtaW5yZWFjdC5ydSIsImRpc3BsYXlfdXJsIjoiNW1pbnJlYWN0LnJ1IiwiaW5kaWNlcyI6WzAsMjNdfV19LCJkZXNjcmlwdGlvbiI6eyJ1cmxzIjpbXX19LCJwcm90ZWN0ZWQiOmZhbHNlLCJmb2xsb3dlcnNfY291bnQiOjI0ODgsImZyaWVuZHNfY291bnQiOjE0MiwibGlzdGVkX2NvdW50IjozNSwiY3JlYXRlZF9hdCI6Ik1vbiBOb3YgMjEgMTI6MjA6MDEgKzAwMDAgMjAxNiIsImZhdm91cml0ZXNfY291bnQiOjc0LCJ1dGNfb2Zmc2V0IjpudWxsLCJ0aW1lX3pvbmUiOm51bGwsImdlb19lbmFibGVkIjpmYWxzZSwidmVyaWZpZWQiOmZhbHNlLCJzdGF0dXNlc19jb3VudCI6NjUyLCJsYW5nIjpudWxsLCJjb250cmlidXRvcnNfZW5hYmxlZCI6ZmFsc2UsImlzX3RyYW5zbGF0b3IiOmZhbHNlLCJpc190cmFuc2xhdGlvbl9lbmFibGVkIjpmYWxzZSwicHJvZmlsZV9iYWNrZ3JvdW5kX2NvbG9yIjoiMDAwMDAwIiwicHJvZmlsZV9iYWNrZ3JvdW5kX2ltYWdlX3VybCI6Imh0dHA6XC9cL2Ficy50d2ltZy5jb21cL2ltYWdlc1wvdGhlbWVzXC90aGVtZTFcL2JnLnBuZyIsInByb2ZpbGVfYmFja2dyb3VuZF9pbWFnZV91cmxfaHR0cHMiOiJodHRwczpcL1wvYWJzLnR3aW1nLmNvbVwvaW1hZ2VzXC90aGVtZXNcL3RoZW1lMVwvYmcucG5nIiwicHJvZmlsZV9iYWNrZ3JvdW5kX3RpbGUiOmZhbHNlLCJwcm9maWxlX2ltYWdlX3VybCI6Imh0dHA6XC9cL3Bicy50d2ltZy5jb21cL3Byb2ZpbGVfaW1hZ2VzXC84MDEzODcyNzk5MzE2MjU0NzNcL0hfSzZPNTNaX25vcm1hbC5qcGciLCJwcm9maWxlX2ltYWdlX3VybF9odHRwcyI6Imh0dHBzOlwvXC9sZW9uYXJkby5vc25vdmEuaW9cL2MwMWFhZWFlLTAxNTYtNTFhOC1hNzc0LTA0YTU3NzdkMjRiZlwvIiwicHJvZmlsZV9iYW5uZXJfdXJsIjoiaHR0cHM6XC9cL3Bicy50d2ltZy5jb21cL3Byb2ZpbGVfYmFubmVyc1wvODAwNjc1MTI3OTM5NjAwMzg1XC8xNDc5OTAwNjIzIiwicHJvZmlsZV9saW5rX2NvbG9yIjoiRkFCODFFIiwicHJvZmlsZV9zaWRlYmFyX2JvcmRlcl9jb2xvciI6IjAwMDAwMCIsInByb2ZpbGVfc2lkZWJhcl9maWxsX2NvbG9yIjoiMDAwMDAwIiwicHJvZmlsZV90ZXh0X2NvbG9yIjoiMDAwMDAwIiwicHJvZmlsZV91c2VfYmFja2dyb3VuZF9pbWFnZSI6ZmFsc2UsImhhc19leHRlbmRlZF9wcm9maWxlIjpmYWxzZSwiZGVmYXVsdF9wcm9maWxlIjpmYWxzZSwiZGVmYXVsdF9wcm9maWxlX2ltYWdlIjpmYWxzZSwiZm9sbG93aW5nIjpudWxsLCJmb2xsb3dfcmVxdWVzdF9zZW50IjpudWxsLCJub3RpZmljYXRpb25zIjpudWxsLCJ0cmFuc2xhdG9yX3R5cGUiOiJub25lIiwid2l0aGhlbGRfaW5fY291bnRyaWVzIjpbXX0sImdlbyI6bnVsbCwiY29vcmRpbmF0ZXMiOm51bGwsInBsYWNlIjpudWxsLCJjb250cmlidXRvcnMiOm51bGwsImlzX3F1b3RlX3N0YXR1cyI6ZmFsc2UsInJldHdlZXRfY291bnQiOjAsImZhdm9yaXRlX2NvdW50Ijo0LCJmYXZvcml0ZWQiOmZhbHNlLCJyZXR3ZWV0ZWQiOmZhbHNlLCJwb3NzaWJseV9zZW5zaXRpdmUiOmZhbHNlLCJwb3NzaWJseV9zZW5zaXRpdmVfYXBwZWFsYWJsZSI6ZmFsc2UsImxhbmciOiJydSIsInByb2Nlc3NlZF90ZXh0Ijoi0J3QsCDRgdCw0LnRgtC1IDxhIGhyZWY9XCJodHRwczpcL1wvdHdpdHRlci5jb21cL2h0bWxhY2FkZW15X3J1XCIgcmVsPVwibm9mb2xsb3cgbm9yZWZlcnJlciBub29wZW5lclwiIHRhcmdldD1cIl9ibGFua1wiPkBodG1sYWNhZGVteV9ydTxcL2E+INC/0YDQvtGF0L7QtNC40YIg0L3QvtCy0L7Qs9C+0LTQvdGP0Y8g0LHQuNGC0LLQsCBIdG1sUHVuaywg0LIg0LrQsNGH0LXRgdGC0LLQtSDQvdCw0LPRgNCw0LTRiyDQt9CwINGD0YfQsNGB0YLQuNC1INC80L7QttC90L4g0L/QvtC70YPRh9C40YLRjCB1bmRlZmluZWQg0LrQvtC40L3QvtCyLCDQv9GA0LjRgdC+0LXQtNC40L3Rj9C50YLQtdGB0Ywg0LXRgdC70Lgg0LLRiyBpcyBub3QgYSBmdW5jdGlvbiA8YSBocmVmPVwiaHR0cHM6XC9cL2h0bWxhY2FkZW15LnJ1XCIgcmVsPVwibm9mb2xsb3cgbm9yZWZlcnJlciBub29wZW5lclwiIHRhcmdldD1cIl9ibGFua1wiPmh0dHBzOlwvXC9odG1sYWNhZGVteS5ydTxcL2E+IDxhIGhyZWY9XCJodHRwczpcL1wvdC5jb1wvUEVSaFpJTXUzbVwiIHJlbD1cIm5vZm9sbG93IG5vcmVmZXJyZXIgbm9vcGVuZXJcIiB0YXJnZXQ9XCJfYmxhbmtcIj5odHRwczpcL1wvdC5jb1wvUEVSaFpJTXUzbTxcL2E+In0=|2c82c926334605b03fd796e49ab211c8b701e5d51f9bba6ce6bddfc35134c135","version":"2.0"}},"title":"","media":true,"conversation":false}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Но это всё не страшно. Главное — понять, где случились проблемы, осознать ошибки и исправить их. Ко всему этому мы решили поделиться опытом, и надеюсь, что это было хотя бы чуть-чуть капельку полезно.

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":7,"favorites":10,"reposts":0,"views":114,"hits":996,"reads":null,"online":0},"dateFavorite":0,"hitsCount":996,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/life/240264-ne-lezte-v-geimdev-on-vas-sozhret-no-vam-ponravitsya","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199123,"name":"Личный опыт","description":"Расскажите о том, через что вы прошли самостоятельно: кейс в работе, продуктивность, личные финансы.","uri":"/life","avatar":{"type":"image","data":{"uuid":"68e0e807-2b43-55b9-9b76-b3f0f76f3d32","width":2400,"height":2400,"size":98919,"type":"jpg","color":"93dbd3","hash":"d0dc0c10303010","external_service":[]}},"cover":null,"lastModificationDate":1704109490,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"life","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":6}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":218450,"customUri":null,"subsiteId":300624,"title":"Что должно быть в макете сайта: шпаргалка для дизайнера","date":1615331392,"dateModified":1615331392,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"11a2df88-98bd-54b8-b8dd-3555ad63e338","width":1454,"height":973,"size":216780,"type":"jpg","color":"3f423e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Осторожно, в статье много иллюстраций.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Общие рекомендации"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шрифты"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Их нужно прикреплять к макету, иначе разработчик скачает какие-нибудь не те и испортит дизайн.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Векторные объекты"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Удивительно, но векторная картинка должна быть в векторе и на макете. Если в макет вставить изображение другого формата, там оно будет выглядеть нормально, но при тестировании станет мыльным. Чтобы такого не происходило, надо всегда использовать вектор: скажем, прикреплять SVG-иконки.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Сетка"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Лучше всего не удалять сетку с макета, так как по ней удобно ориентироваться. Когда есть сетка, проще разбивать макет на части, делать колонки нужной ширины. Тогда в адаптивной вёрстке меньше багов, и сайт в целом выглядит аккуратнее.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Сетка на макете сайта в Figma","image":{"type":"image","data":{"uuid":"24af0a3e-f5e5-5cd2-9375-db6bd0d2a90a","width":714,"height":456,"size":35873,"type":"png","color":"f1e0e0","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Обязательные элементы для сайта"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Страница 404"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Она нужна для замены той страницы, которой по каким-то причинам нет: товар убрали из продажи, ссылка оказалось битой, в адрес вкралась опечатка, пользователь забыл залогиниться и прошёл по прямой ссылке из закладок и т.д.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

404 — это код самой популярной ошибки. Кроме неё существует и множество других состояний, но для упрощения работы 404 стала универсальной страницей для обработки ошибок.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если не забыть про 404, можно пофантазировать и сделать креативной даже эту, самую типовую, страницу. Например, можно добавить интерактивности.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Страница 404 сайта компании Dewis","image":{"type":"image","data":{"uuid":"cc8ce64a-f54a-5c90-9aff-011f2cef2dbd","width":1600,"height":746,"size":68442,"type":"png","color":"f9c112","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Пустая страница"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если поисковик или фильтр не выдал никаких вариантов, то открывается страница с текстом из разряда «Записей за выбранный период нет». И о ней тоже надо подумать заранее.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Пустая страница при отсутствии вариантов на сайте «N+1»","image":{"type":"image","data":{"uuid":"72d7515d-f817-599d-b67a-24fe502aa83e","width":765,"height":285,"size":8800,"type":"png","color":"080809","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Однако некоторые сайты даже в случае неудачного поиска специально показывают альтернативные варианты: пустой выдачи быть не может.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Страница с результатами поиска"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Поиск товаров на сайте Zara Home","image":{"type":"image","data":{"uuid":"e0369264-b55a-509b-9880-d5c70661faf8","width":1305,"height":515,"size":62203,"type":"png","color":"785f4b","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А так выглядит та же страница, если выпадающего списка нет:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"67a558c6-017b-5632-b4e0-2dad4685f44c","width":1305,"height":515,"size":137076,"type":"png","color":"a9947f","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Картинка для шаринга"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Речь идёт о картинке, которая появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку. Кстати, разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Ссылка на HTML Academy во Вконтакте","image":{"type":"image","data":{"uuid":"fd14ee2e-7f07-5e79-92bf-9533ab31801a","width":890,"height":578,"size":185221,"type":"png","color":"f25e2f","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Страница с текстом"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это может быть целая страница в блоге или какая-либо отдельная статья. Неопытные дизайнеры часто рисуют одну страницу с текстом по примеру заказчика, но упускают то, что в текстах других страниц может быть другой контент. Поэтому нужно продумать все возможные элементы:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["вводный текст;","цитата и длинная цитата с подписью и фото;","видео (и подпись, если она нужна);","картинка (и подпись, если она нужна);","ссылки;","слайдер;","жирный текст;","списки (нумерованный и маркированный), вложенные списки;","блок «поделиться»."],"type":"UL"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Блог HTML Academy","image":{"type":"image","data":{"uuid":"554f3005-6f83-5276-ac15-268c22a242f8","width":1600,"height":919,"size":137972,"type":"png","color":"bebebd","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Необязательные элементы"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Они помогают пользователю сориентироваться на сайте, добавляют наглядности. Такие элементы есть не в каждом проекте, но если они всё-таки предполагаются, надо отрисовать и их. Вот список элементов, которые дизайнеры могут забыть.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Стили для карты отдельным текстовым файлом"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вместо обычной карты хочется сделать что-то нестандартное, можно воспользоваться сервисом Snazzy maps. Только нужно уточнить у клиента, будет ли он покупать лицензионный ключ к картам. Если да, передавать разработчикам стили надо в виде JSON-файла.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Разные стили карты Санкт-Петербурга на Snazzy maps","image":{"type":"image","data":{"uuid":"e613cf7c-d276-560b-b6c1-355f90943e84","width":798,"height":251,"size":65866,"type":"png","color":"465853","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Выделение активного пункта в меню"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Поисковый запрос в Google","image":{"type":"image","data":{"uuid":"e6fe0b56-c6ef-5f1f-acd5-ef39a059ece1","width":1517,"height":457,"size":65307,"type":"png","color":"e2e2e1","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Хлебные крошки"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Блог HTML Academy","image":{"type":"image","data":{"uuid":"c8b802ae-db24-58be-8f71-72f209eb30bc","width":678,"height":191,"size":12954,"type":"png","color":"393539","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Личный кабинет"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сюда относятся страницы входа, страницы с настройками и введёнными данными, страницы с предпочтениями (любимые товары и т.д.).

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Редактирование профиля на ivi.ru","image":{"type":"image","data":{"uuid":"a4ad568d-4e74-5242-9e59-d3779354cbd7","width":633,"height":397,"size":16506,"type":"png","color":"201643","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Постраничная навигация"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для блока новостей при вёрстке достаточно и двух-трёх блоков, но на реальном сайте таких блоков могут быть тысячи. Поэтому не стоит забывать про отрисовку пагинации и кнопки «Показать ещё».

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Статья на сайте National Geographic","image":{"type":"image","data":{"uuid":"98d5a4b8-bca2-5ab6-8ebe-3f09e343916c","width":1546,"height":768,"size":289782,"type":"png","color":"453c2b","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Кнопка «Вверх»"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Её обычно рисуют для длинных лендингов и каталогов с товарами, чтобы пользователю было удобно вернуться наверх страницы.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Кнопка «вверх» при поиске товаров на сайте Румиком","image":{"type":"image","data":{"uuid":"d8aa22a7-af94-593a-9ade-eaa4e6c8f187","width":469,"height":243,"size":11548,"type":"png","color":"f2f2f2","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Фильтры"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если они есть, нужно внимательно проверить все возможные детали для каждого.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чекбоксы, радиокнопки — надо учесть особенности всех типов фильтров.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Выбор товаров на Ozon","image":{"type":"image","data":{"uuid":"d3cefcf2-423c-5eda-9b6a-9f21e0123a50","width":436,"height":386,"size":5815,"type":"png","color":"c3c4c6","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Кнопка «Сбросить/очистить всё» или сбросить отдельные пункты.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Поиск товаров на Ozon","image":{"type":"image","data":{"uuid":"bd6fbbf5-b8f5-55b9-ac4b-9c0a5854c665","width":520,"height":139,"size":4312,"type":"png","color":"e0e5ec","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Раскрытый список с пунктами.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Фильтр категории на Ozon","image":{"type":"image","data":{"uuid":"32d31f27-b040-5ea6-8313-a373caebc7e1","width":357,"height":253,"size":10287,"type":"png","color":"30528f","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ползунок для фильтра с ценой (от… до…).

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Фильтрация цены товаров на Ozon","image":{"type":"image","data":{"uuid":"53a22ee0-2ecb-5b09-b2af-bc2d30762090","width":474,"height":300,"size":7867,"type":"png","color":"c8d4e2","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Блок с количеством товаров:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Выбор количества товаров на Ozon","image":{"type":"image","data":{"uuid":"e88fc72b-20c3-5f40-8bc6-cf09daeefd2f","width":400,"height":170,"size":2261,"type":"png","color":"e9ebeb","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Обработка ошибок или подсказки к полям:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Подсказка к полю на Ozon","image":{"type":"image","data":{"uuid":"92d935d5-8783-5735-b3bc-a4f9d876a5f3","width":814,"height":270,"size":10090,"type":"png","color":"2476e8","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Согласие на обработку персональных данных"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Регистрация на сайте Zara.Home","image":{"type":"image","data":{"uuid":"10ddf1fe-b9ea-52ac-b6b6-29923fa16506","width":777,"height":423,"size":15630,"type":"png","color":"07a3e9","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Фавикон"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это маленькая картинка рядом с названием страницы на вкладке. Чтобы она корректно отображалась во всех браузерах и на всех устройствах, нужно подготовить картинку в разных размерах и форматах. А ещё можно для разных страниц одного сайта нарисовать свой фавикон.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Фавиконки YouTube и Google Документов","image":{"type":"image","data":{"uuid":"13090202-5813-5bc8-a71a-d0ef30bf23f2","width":488,"height":96,"size":7105,"type":"png","color":"161616","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Заглушки для изображений"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если фотография человека или товара не загружена, должно быть какое-то изображение — заглушка.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Товары с сайта Ozon","image":{"type":"image","data":{"uuid":"0bfd32cc-942e-5608-b53d-4f607bf38142","width":499,"height":317,"size":19734,"type":"png","color":"dadbdd","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Модальные окна"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

То, что происходит после отправки формы:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["«Спасибо за заявку»","«Ваша заявка не отправлена, произошла ошибка»"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Второе окно можно увидеть очень редко. Например, если при отправке что-то случилось с сервером и он не смог обработать заявку пользователя.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Оформление заказа на на сайте Румиком","image":{"type":"image","data":{"uuid":"c636094e-09c2-533a-879d-00931cfa66bb","width":461,"height":237,"size":20046,"type":"png","color":"b7b7b7","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Календарь"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если делать календарь, то стоит задизайнить несколько состояний::

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["текущую дату;","выбранную дату;","интервал между выбранными датами;","ховер."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если что-то из этого не сделать, пользователь просто не сможет сориентироваться в календаре.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Выбор даты на Aviasales.ru","image":{"type":"image","data":{"uuid":"20725b43-29de-5271-866c-739bd7c81661","width":773,"height":403,"size":37723,"type":"png","color":"eaf0f7","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"UI kit"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это готовый набор графических элементов. Если они понадобятся верстальщику снова, их не придётся искать по всему проекту, а можно будет сразу обратиться к Ul kit. Так будет проще разобраться и другому верстальщику, если по прошествии времени клиент захочет собрать новые страницы на основе существующих. Сделать UI kit — хороший тон для дизайнера. В UI Kit могут входить кнопки, хлебные крошки, формы, ссылки, отступы, фон, декоративные псевдоэлементы (например, полосочки),

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Набор кнопок с сайта UI Garage","image":{"type":"image","data":{"uuid":"91f044a6-4668-5508-96b3-832c5cd0db3e","width":931,"height":1600,"size":126856,"type":"png","color":"0961d9","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы лучше понимать верстальщиков и сразу делать всё, как нужно, пройдите курсы по вёрстке Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса \"HTML и CSS. Профессиональная вёрстка сайтов\". А с промокодом SKUCHNO цена на любой профессиональный курс станет ещё приятнее.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Любой из вариантов поможет говорить на одном языке с разработчиками и не тратить время на переделку каждого блока в макете. А там и до фронтенда недалеко.

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Над статьёй работали:

"}},{"type":"person","cover":false,"hidden":false,"anchor":"","data":{"image":null,"title":"Даша Владыко","description":"Текст, иллюстрации"}},{"type":"person","cover":false,"hidden":false,"anchor":"","data":{"image":null,"title":"Алёна Кудлаева","description":"Редактура, иллюстрации"}},{"type":"person","cover":false,"hidden":false,"anchor":"","data":{"image":null,"title":"Евгений Шкляр","description":"Шеф-редактор"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":7,"favorites":164,"reposts":1,"views":92,"hits":9890,"reads":null,"online":0},"dateFavorite":0,"hitsCount":9890,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":true,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/design/218450-chto-dolzhno-byt-v-makete-saita-shpargalka-dlya-dizainera","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199114,"name":"Дизайн","description":"Материалы о красивых вещах, логотипах, веб-дизайне.","uri":"/design","avatar":{"type":"image","data":{"uuid":"81132c2d-ddb6-0127-19d6-e1d1293194b1","width":0,"height":0,"size":1,"type":"jpg","color":"","hash":"","external_service":[]}},"cover":{"type":"image","data":{"uuid":"b8bf3924-2ba4-571c-a7b6-4be86417c6b9","width":960,"height":280,"size":21376,"type":"png","color":"dd6a8c","hash":"","external_service":[]}},"lastModificationDate":1620994027,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"design","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":31}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":213144,"customUri":null,"subsiteId":300624,"title":"«Я никогда не научусь верстать» и другие мифы о разработке","date":1614203317,"dateModified":1614203317,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"За 15 лет я успел забыть, что и так можно было HTML Academy","image":{"type":"image","data":{"uuid":"43956f6c-b36f-52cd-80d1-ddf5180ee8a4","width":1600,"height":801,"size":77289,"type":"png","color":"edeeec","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Могу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозность (ну то есть чего вы всерьёз не можете сделать на CSS? Машину времени?). Мне сложно смотреть даже на селекторы, а из-за угла уже манят флексы с гридами и говорят — «псс, не хочешь немного сеток и бессоных ночей?». Больно думать о позиционировании текста на бесконечном холсте, когда всю жизнь расставлял кнопки мышкой на форме.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 1. Веб-разработка не для меня"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

У некоторых языков действительно очень высокий порог входа — не всегда даже понятно, с чего начать.

"}},{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.

","subline1":"Вспомнить хотя бы тот прекрасный текст про изучение JavaScript в 2016"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если ваш мозг отказался вникать в цитату выше, не переживайте. Мой тоже, и это пока нормально. Главное, что нужно помнить — нет никакого «не для меня», «гуманитарного склада ума» и вот этих всех вещей, пока вы даже не попробовали начать.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 2. Страшно сделать ошибку"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Негативный опыт — хороший учитель.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Когда мы получаем штраф, хочется исправиться и больше не повторять. Так что можно даже сказать, что чем больше ошибок в начале, тем лучше. Когда я писал свой первый код на Visual Basic, у меня уже был интернет, но я принципиально им не пользовался, «потому что неспортивно». Сейчас, конечно, так бы не стал, но кто слушает тридцатилетних себя из будущего в 13 лет?

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Миф #24149. Картинки из xkcd делают статью о программировании лучше","image":{"type":"image","data":{"uuid":"92cd6c02-9538-5d0d-96bc-45ed46bbbc28","width":535,"height":333,"size":17018,"type":"png","color":"1e1e1e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Что делать. Разрешите себе пробовать снова и снова. Что самое страшное может случиться? Ну, зависнет страничка, и придётся перезагрузить компьютер. В крайнем случае переустановите свою Windows 98. Это не сложно, зато можно продолжать попытки.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 3. Ошибка — конец света"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В начале кажется, что если в коде ошибка, то сломано вообще всё. Обычно это не так. Я хотел бы посчитать, сколько времени потратило человечество на исправление ошибок в один символ в каком-нибудь PHP. Или хотя бы я сам, когда писал сортировки массивов на Паскале. Хотел бы, но не могу.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"965bcbaf-7037-5bc8-963c-fe16c9692d18","width":872,"height":334,"size":117417,"type":"png","color":"c3c3c3","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Что делать. Научиться отлаживать код. Если после добавления какого-то блока, программа сломалась, закомментируйте этот блок. Убедитесь, что дело именно в нём, потом добавляйте его в код по одной строчке и смотрите, что изменилось. Полезные навыки — тестирование собственного кода и работа с инструментами разработчика.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 4. Сложно сделать первый проект"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Я прозвучу как капитан очевидность, но любая компьютерная программа — сложный механизм. Большинству людей сложно представить, как будет выглядеть сайт в самом конце, но легко представить, из чего сайт состоит.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"135abb68-47c2-561b-a0b2-7b2bf3f01ddb","width":710,"height":259,"size":36832,"type":"png","color":"dddddd","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Одна из моих первых наивных попыток разбить что-то на фичи. А потом придумать им стильное название","image":{"type":"image","data":{"uuid":"acbfcbcc-2276-5bda-b5c0-22ca67077088","width":953,"height":473,"size":27156,"type":"png","color":"222c42","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 5. Код можно никому не показывать"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Этот миф распространён среди тех, кто представляет себе программистов в виде злобных капюшонистых хакеров в тёмном подвале.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Что делать. Найти разработчика, который будет смотреть ваш код, пока вы учитесь. Можно поискать среди спикеров профильных ивентов, нагуглить наставников HTML Academy или просто среди программистов в социальных сетях. Конечно, эти люди могут отказывать по многим причинам — может не быть времени или желания кого-то обучать. К тому же не все готовы помогать бесплатно, поэтому будьте готовы договариваться. Постоянный ментор может оказаться дороже, чем периодические ревью вашего кода.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы публикуете свой код на «Тостере» и подобных сайтах, будьте готовы, что советовать будут разные люди. Под видом опытного разработчика может скрываться новичок, и советы могут стать немного разрушительными.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы было проще, объединяйтесь с другими новичками. Придумайте общий проект и пилите его вместе (а то мы джва года ждём). Вы научитесь командной работе, будете поддерживать друг друга, спорить, обмениваться мнениями. Вместе расти проще, чем в одиночку. А ещё, если не лень, можно скинуться на ревьюера кода, чтобы было выгоднее.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Все мы знаем, зачем нужен Git","image":{"type":"image","data":{"uuid":"36d29688-bfe1-5216-89cb-75a5ad9fe141","width":525,"height":250,"size":83625,"type":"png","color":"cecece","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 6. После курсов платят по 200 тысяч"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Этот миф пошёл из рекламы некоторых курсов, но на практике такое практически не случается. 200 тысяч — зарплата синьора в большом городе, но никак не джуна после курсов. Можно через годик-другой добраться до 100 тысяч в месяц, но для этого придётся многому научиться. Курсы — только одна из ступеней к большой зарплате, и всё зависит от мотивации и желания постоянно развиваться. Это тот случай, когда план развития важнее прочитанной когда-то теории.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Что делать. Думайте на перспективу. Здорово, если есть возможность попасть в сильную команду на интересный проект, но если нет, то начинайте хоть с чего-то. Сначала зарплата может быть не слишком большой, но она быстро вырастет, если вы будете хорошо справляться с работой. Подумайте об этом ещё на этапе учёбы и начните откладывать финансовую подушку, которая позволит вам выбирать работу в начале карьеры не из-за денег, а из-за опыта. Так вы будете чувствовать себя гораздо свободнее при выборе нового места работы.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Миф 7. Невозможно научиться самостоятельно"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Что делать. Придумайте себе проект и потихоньку сделайте его. Если сложно выбрать, возьмите проблему из внешнего мира: приложение, которое напоминает пить лекарства или ведёт финансы. Если это скучно, напишите игру. Главное, чтобы было интересно решать вот эту конкретную задачу. Тогда вы не бросите проект, даже если будет очень сложно.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Используйте интересные вам технологии, чтобы на практике узнать, как они работают. Если это первый проект, то для начала сделайте, чтобы программа просто работала. Всегда есть StackOverflow и сообщества программистов — задавайте вопросы или ищите готовые ответы. Для первого сайта сгодится всё, главное — не сдаваться.

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

1 марта в HTML Academy начинается очередной марафон по вёрстке. За три недели вы разберётесь в основах HTML и CSS, сверстаете сайт по макету и выложите его в интернет. В программе 28 тренажёров, которые обычно платные, но для участников марафона будут доступны бесплатно. Ещё разыграем одно место на курсе «HTML и CSS. Профессиональная вёрстка сайтов».

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы принять участие, подпишитесь на рассылку в Телеграме или в VK — там мы будем присылать макет, материалы для обучения, план работы и подбадривающие сообщения. В день старта марафона мы запустим чат для участников, там можно будет обсудить сложные моменты и задать вопросы обо всём, что непонятно.

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":3,"favorites":43,"reposts":0,"views":71,"hits":2210,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2210,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/213144-ya-nikogda-ne-nauchus-verstat-i-drugie-mify-o-razrabotke","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":18}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":202839,"customUri":null,"subsiteId":300624,"title":"12 полезных книг по JavaScript","date":1612055433,"dateModified":1612055433,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"f284439c-02db-5037-8dbc-c3be7cc6b96d","width":329,"height":235,"size":27828,"type":"png","color":"cbced6","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Серия «Вы не знаете JavaScript», книга с носорогом, «Чистый код» и другая классика для веб-разработчиков.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Делимся подборкой книг, которая пригодится любому программисту (но особенно веб-разработчику) — в ней 12 книг, от подробных руководств по JavaScript до классики Роберта Мартина о чистом коде.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Изучаем программирование на JavaScript"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Изучаем программирование на JavaScript» Эрик Фримен, Элизабет Робсон","image":{"type":"image","data":{"uuid":"beca82a2-bec7-504e-80c3-cb4c5b97241d","width":640,"height":853,"size":179973,"type":"png","color":"21224e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы начинаете путь в разработке, и пока для вас программирование больше похоже на магию — присмотритесь к этой книге. Она познакомит вас с одним из самых популярных языков программирования — JavaScript. Основная её особенность — повествование в стиле комиксов. Обучение строится через иллюстрации и многочисленные рассуждения в виде прямой речи героев.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Серия «Вы не знаете JavaScript»"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Типы и грамматические конструкции JS» Кайл Симпсон","image":{"type":"image","data":{"uuid":"a701997f-eb48-5b99-913b-7cd0dec526b3","width":640,"height":853,"size":152691,"type":"png","color":"fae015","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В одной из предыдущих книжных подборок мы рассказывали о книге Кайла Симпсона «ES6 и не только», которая отлично подходит для быстрого введения в новые возможности языка JavaScript и является продолжением серии «Вы не знаете JavaScript» (You don’t know JS).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Эти книги подойдут как новичкам, получившим свой первый опыт программирования на JavaScript, так и мидл-разработчикам, желающим подтянуть теоретические знания. Можно сказать больше: если вы собираетесь идти на собеседование фронтенд-разработчика, то эти книги однозначно пригодятся, чтобы освежить теоретические знания.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Книги доступны для изучения в репозитории автора или в русском переводе.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Как устроен JavaScript"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Как устроен JavaScript» Дуглас Крокфорд","image":{"type":"image","data":{"uuid":"1eb2b042-6930-51e4-a214-6e83f834db70","width":640,"height":919,"size":122079,"type":"png","color":"8d8683","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Дуглас Крокфорд — известный специалист в мире JavaScript. Он рассказывает, как язык устроен «под капотом». Книга не учит программированию, а объясняет нюансы языка, поэтому рекомендуем тем, кто осилил Кайла Симпсона — это логическое продолжение его работ.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вот неполный список вопросов, на которые отвечает книга:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Как устроены объекты","Почему ООП в JavaScript реализовано именно так","Как работают генераторы","Зачем нужен и как используется оператор this","Как JavaScript работает с числами."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если книга не учит программировать, то зачем её читать разработчикам? Чтобы лучше понимать, как работает основной инструмент — язык программирования, а заодно подготовиться к очередному собеседованию.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Отдельного внимания заслуживает глава про Wat. Это краткий обзор одноимённого доклада и разбор примеров, которые могут ввести в ступор даже опытных разработчиков.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Секреты JavaScript ниндзя"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Секреты JavaScript ниндзя» Джон Резиг, Блэр Либо","image":{"type":"image","data":{"uuid":"59c74d20-2a1e-519a-827b-88ef7abbc74a","width":640,"height":913,"size":180384,"type":"png","color":"93b0ac","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Изучение JavaScript порой вводит в ступор даже разработчиков с опытом. При этом разобраться с основами языка обычно несложно — трудней понять нюансы и особенности. Например, замыкания, объекты высшего порядка, асинхронное выполнение кода и ряд других тем могут оказаться очень сложными для новичков. Разобраться с этими вопросами на реальных примерах поможет книга «Секреты JavaScript ниндзя».

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Книга ориентирована на опытных JavaScript-программистов, которые хотят прокачать свои навыки. В книге есть главы с разбором синтаксиса, но основное внимание уделено практическому решению задач, тестированию кода, работе Event Loop и другим прикладным задачам. К концу 2020 года большая часть информации в книге остаётся актуальной, хотя некоторые главы и устарели.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Рефакторинг кода на JavaScript"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Рефакторинг кода на JavaScript» Мартин Фаулер","image":{"type":"image","data":{"uuid":"45fdbb3f-8ce5-5dec-964f-e1eca3862787","width":640,"height":904,"size":220835,"type":"png","color":"1f2022","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Мартин Фаулер вряд ли нуждается в особом представлении. Он написал с десяток книг, где поделился богатым опытом написания качественного кода. Одна из последних его работ — «Рефакторинг кода на JavaScript».

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Автор на примерах разбирает проблемные места и объясняет, как улучшить код. В результате читатель буквально слушает историю опытного коллеги и может сразу всё проверить на практике.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Книга читается легко, можно читать всё по порядку или отдельные главы. Совсем новичкам книга не подойдёт: перед прочтением важно разобраться с основными возможностями языка JavaScript.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Чистый код. Создание, анализ и рефакторинг"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«Чистый код. Создание, анализ и рефакторинг» Роберт Мартин","image":{"type":"image","data":{"uuid":"7daeb6e6-ac50-5187-9952-e9e5a9c60da6","width":640,"height":906,"size":412921,"type":"png","color":"f7d622","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Все хотят писать чистый код — он понятен коллегам, его легко поддерживать и улучшать, в нём каждая строчка написана по делу.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Эта книга — классика и настоящая находка для разработчиков любого уровня. Роберт Мартин приводит много примеров хорошего и плохого кода, заостряет внимание на проектировании и типичных ошибках, которые возникают во время этого процесса. Суть книги — не в готовых решениях, а в том, что автор учит думать о чистом коде и делится подходами, которые помогут развить навык его написания. Примеры в книге приведены на языке Java, но существует репозиторий c адаптацией кода под JavaScript.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"JavaScript. Подробное руководство"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"«JavaScript. Подробное руководство» Дэвид Флэнаган","image":{"type":"image","data":{"uuid":"cd1f86d1-dcd9-5de5-a2d4-fd86256826d6","width":640,"height":957,"size":226069,"type":"png","color":"28625c","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы хотите глубоко погрузиться в основы JavaScript, то эта книга для вас. Книга очень большая, в ней рассматриваются все нюансы работы с языком — от сложения разных типов, до движков работы с кодом.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В книге разобраны логические операции, типы данных, выражения, операторы, работа в браузере и лексическая структура. Автор не забывает про смежные темы, которые помогут при разработке, например, регулярные выражения и серверный JavaScript.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ссылка на книгу

"}},{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"

Хорошие книги — сила, но без практики никуда.

Тренажёры по JavaScript дают навыки работы с живым кодом.

Написать код

","subline1":"Кекс"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":7,"favorites":123,"reposts":0,"views":60,"hits":15384,"reads":null,"online":0},"dateFavorite":0,"hitsCount":15384,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/202839-12-poleznyh-knig-po-javascript","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":19}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":202838,"customUri":null,"subsiteId":300624,"title":"10 правил онлайн-собеседований","date":1612054729,"dateModified":1612054729,"blocks":[{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"htmlacademy.ru","image":{"type":"image","data":{"uuid":"d39c03b2-6179-5f6e-972c-f5adcea68bba","width":520,"height":270,"size":17754,"type":"png","color":"040404","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Что сделать до собеседования"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Разберитесь с программами. Славные же были времена, когда все вокруг созванивались в Скайпе. Сейчас программ стало много, и в разных компаниях пользуются разными. Поэтому заранее уточните, какая нужна, скачайте и научитесь ей пользоваться.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Приведите себя в порядок. Онлайн-собеседование не значит, что нужно сидеть в пижаме и спросонья. Лучше всё-таки причесаться и надеть не домашнюю футболку — в конце концов, нужно произвести хорошее впечатление даже онлайн.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"На собеседовании"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Подберите освещение. Сядьте напротив окна, чтобы вас было хорошо видно. Если созвон вечером и солнце уже спряталось из окна нет, включите лампу или свет в комнате. Лучше чтобы она была перед вами, а не за. Исключение — вакансия тёмного лорда.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"10 правил"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Проверьте технику","Установите Зум (или в чём будет созвон)","Найдите тихое место","Приведите себя в порядок","Налейте воды","Не опаздывайте","Подберите правильный свет","Включите камеру","Выключайте микрофон, когда говорите не вы","Предупреждайте о планах"],"type":"UL"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":5,"favorites":12,"reposts":0,"views":40,"hits":690,"reads":null,"online":0},"dateFavorite":0,"hitsCount":690,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/hr/202838-10-pravil-onlain-sobesedovanii","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199121,"name":"Карьера","description":"Всё о сотрудниках и личном карьерном росте. Как нанимать, строить внутренние процессы, управлять командой, где искать работу и какие сейчас зарплаты.","uri":"/hr","avatar":{"type":"image","data":{"uuid":"7e34636c-3189-5ba0-a2b3-c1c9ee18b5ba","width":1200,"height":1200,"size":123655,"type":"png","color":"b55467","hash":"1c10103828607050","external_service":[]}},"cover":{"type":"image","data":{"uuid":"144c0e97-a576-513b-bced-8d560cb0c16f","width":960,"height":280,"size":177,"type":"png","color":"ccf4ec","hash":"","external_service":[]}},"lastModificationDate":1602856647,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"hr","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":6}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":180468,"customUri":null,"subsiteId":300624,"title":"Математика и много непонятных слов. Разбираемся насколько сложно стать программистом","date":1606228172,"dateModified":1606228172,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"Серёжа продаёт шкафы и попутно сомневается htmlacademy.ru","image":{"type":"image","data":{"uuid":"882ccf9c-f830-5970-8fcc-5645a89661cb","width":820,"height":462,"size":18611,"type":"png","color":"1c1c1c","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Серёжа слышал, что программистам платят много денег, хочет стать разработчиком и поэтому теперь изучает всё, что попадается под руку. Он уже слышал про HTML, CSS и JavaScript, но всё равно сомневается.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сомнения помогают двигаться дальше

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Серёжины сомнения в новой профессии приводят к разным вопросам, которые появились бы у кого угодно.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Какой язык учить?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В веб-разработке — только JavaScript (читается как «джаваскрипт»). Это база, которая поможет в будущем работать с React.js, TypeScript или даже делать странички с помощью jQuery. Сайты очень редко делают без использования JavaScript.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А ещё не надо путать JavaScript и Java — это совсем разные языки.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"В школе с математикой было не очень. Это плохо?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Математика в смысле «сложить 5 и 5 и получить 10» не сильно-то и поможет — всё равно считает компьютер. Да и в JavaScript иногда 1+1=2.00000000001. Синусы и косинусы пригодятся тем, кто делает игры и анимацию, а логарифмы и интегралы чаще всего веб-разработчикам не нужны.

"}},{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"

Математику уже затем учить надо, что она ум в порядок приводит.

","subline1":"М.В. Ломоносов"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Но математика помогает писать и разбираться в алгоритмах, понимать логику и расставлять всё по полочкам. То, что называется «техническим складом ума», тоже добавит очков при поиске работы, но и гуманитарии нормально справляются.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"А что с высшим образованием? Оно нужно?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Где тогда учиться?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Есть несколько путей. Можно посмотреть весь Ютуб, прочитать все книжки, делать свои проекты или пройти курсы — в зависимости от желания и возможностей. Чтобы понять, насколько вам подходит веб-разработка, можете начать с бесплатных тренажеров HTML Academy. Они позволят познакомиться с профессией в игровой и доступной форме. Если понравится, можно записаться на профессиональные курсы по вёрстке и JavaScript и пройти стажировку на реальных проектах.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Все говорят, что программисты — новые рок-звёзды и получают много денег. Но должны же быть минусы?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Много непонятных слов! А-а-а!"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"htmlacademy.ru","image":{"type":"image","data":{"uuid":"ea910fc2-112b-5357-864c-6977b58e612c","width":820,"height":615,"size":32400,"type":"png","color":"0f0f0f","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Большинство слов пришли в профессию из английского. Чтобы понять значение, достаточно их перевести или спросить у коллег. К слову, ИТ — достаточно комфортная и открытая среда. Здесь принято спрашивать, если что-то не понятно, и делиться информацией с новичками.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Пройти через стресс, который испытывают новички, все равно придется. Но мы не знаем ни одной профессии, в которой его бы не существовало.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Онлайн-курсы хуже «полноценного» очного обучения?"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Не все курсы одинаково полезны","image":{"type":"image","data":{"uuid":"d28131fb-4ad7-57a3-8e9b-95e6ebc84165","width":820,"height":615,"size":25515,"type":"png","color":"c8c8c8","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Успею ли я совмещать работу и обучение"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Программисты пишут много кода и поэтому много получают"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Программисты много получают из-за того, что много думают, прежде чем написать код. 50-100 строк отлаженного и обдуманного кода за рабочий день в реальном проекте — хороший результат. Поэтому нужно не гнаться за количеством, а следить, чтобы всё было в порядке с качеством.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Серёжин друг Богдан — мидл джун фулстэк реакт девелопер в ООО «Вектор» на полставки htmlacademy.ru","image":{"type":"image","data":{"uuid":"da06918c-3996-50b4-ba88-f3969196a888","width":820,"height":615,"size":37378,"type":"png","color":"cbcbcb","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А чтобы получить подробный план обучения, подпишитесь на нашу рассылку.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В комплекте два письма и PDF-инструкция, как стать веб-разработчиком.

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":3,"favorites":22,"reposts":0,"views":38,"hits":2044,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2044,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/education/180468-matematika-i-mnogo-neponyatnyh-slov-razbiraemsya-naskolko-slozhno-stat-programmistom","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":371372,"name":"Образование","description":"Поиск лучших онлайн-курсов: vc.ru/courses/","uri":"/education","avatar":{"type":"image","data":{"uuid":"77b81b4d-da8b-5bf8-b53a-8747d5290785","width":1200,"height":1200,"size":280343,"type":"png","color":"f7e1d9","hash":"1060606060602010","external_service":[]}},"cover":{"type":"image","data":{"uuid":"ae14be38-2bcb-595d-8e0e-949ebe55c7df","width":960,"height":280,"size":177,"type":"png","color":"fce4dc","hash":"","external_service":[]}},"lastModificationDate":1602859949,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"education","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":9}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":157273,"customUri":null,"subsiteId":300624,"title":"Как создаются интерактивные курсы. Разбираем поэтапно","date":1599735487,"dateModified":1599735487,"blocks":[{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

HTML Academy — специализированная онлайн-школа веб-разработки. С 2013 года мы делаем курсы для начинающих и продолжающих, и один из наших продуктов — интерактивные курсы, они же — тренажёры. Когда Академия только появилась, браузеры были грустными и маленькими, а стандарты не такими необъятными. Поэтому пределом возможностей для интерактивных курсов были испытания по CSS. Постепенно появились главы по JavaScript, а в 2019, как только появилась возможность запустить сервер PHP прямо в браузере, мы сразу же сделали онлайн-тренажёры по PHP.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

О том, как мы делаем курсы, расскажем на примере обновлённого курса «Знакомство с JavaScript». Там мы делаем новостной сайт с переключением тем, раскладкой новостей, фильтрами и подпиской на обновления.

"}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"Страница блога, который разрабатывается в тренажёрах","image":{"type":"image","data":{"uuid":"89b9edd3-5932-b010-a4e0-68f2df97b575","width":820,"height":432,"size":478411,"type":"png","color":"1d1d22","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Типовые задачи"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

У нас есть длинный список задач, которые должен уметь решать каждый разработчик. Например, чтобы делать интерактивные страницы на JavaScript, надо знать много интереснейших вещей:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["как искать элементы,","что такое события,
","как добавлять обработчики,
","как менять классы элемента из скрипта,
","как вообще с элементами работать из скриптов,
","что можно менять на странице и как это сделать.
"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Плюс нужны базовые вещи из программирования — условия, циклы, логические операторы, без них вообще сейчас никуда. Всё это мы объясняем.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для этого курса мы, среди прочего, выбрали валидацию формы и паролей, фильтрацию новостей и смену темы на сайте.Критерии выбора задач для конкретной главы простые: задачи должны быстро решаться, результат должен быть видимым, чтобы человек написал пару строчек, и на странице появилась интерактивная магия (для JavaScript). Для вёрстки тоже есть критерий магии — достаточно изменить разметку или CSS и сразу увидеть, что что-то поменялось, и случилась магия, сделанная своими руками.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для каждой задачи сначала собираем прототип — например, делаем ленту комментариев, поле ввода нового комментария и кнопку отправки. После этого пишем довольно простой код на JavaScript, чтобы новый комментарий добавлялся в ленту. Показываем код эксперту — он проверяет и говорит, где улучшить.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Разработка"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Далее каждая задача раскладывается на шаги — будущие задания в главе. Цель — сделать так, чтобы в каждом задании происходило что-то новое, и приближало пользователя к решению задачи. Когда шаги готовы, пишем теорию.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Набор задач внутри задания HTML Academy","image":{"type":"image","data":{"uuid":"84ccd2e1-560c-6f64-5632-cd3b781f132f","width":820,"height":296,"size":273788,"type":"png","color":"f2f2f2","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Человек пишет код на тренажёрах, а система его автоматически проверяет. Например, по заданию нужно добавить в код переменную — пользователь вносит изменение, и движок проверяет, появилась ли эта переменная, верно ли она названа, написан ли код корректно.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поэтому параллельно с теорией разработчики пишут проверки для каждого задания и по необходимости прокачивают движок курсов.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Испытание"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Испытание — это задание в конце главы. Его цель — закрепить и проверить все полученные знания и навыки.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"В новой главе — редактор пиксель-арта HTML Academy","image":{"type":"image","data":{"uuid":"25657bcc-2394-157b-d97e-72a820951894","width":820,"height":575,"size":661281,"type":"png","color":"363a4e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Ревью и причесывание"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Тестирование на пользователях"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В конце мы анализируем всё, что написали тестировщики, и вносим в главу финальные правочки.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Прод"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Когда всё готово, глава появляется на сайте. Звучат фанфары, а в метрики добавляется новая строчка.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сначала глава закрыта от всех, кроме команды, и мы всё тщательно проверяем — перечитываем, пересматриваем, перетыкиваем и вообще стараемся ничего не забыть. Когда все проверки пройдены, мы открываем главу и анонсируем её всем пользователям.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Последняя глава по JavaScript с нуля делалась три недели — это наш рекорд.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Работа над ошибками"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Конечно, как и многие разработчики, мы с течением времени смотрим на старые главы и думаем «Что это был? !».

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"HTML Academy","image":{"type":"image","data":{"uuid":"aa0c6a3e-2e41-1d30-7463-efbdf39300b8","width":820,"height":378,"size":61229,"type":"png","color":"1b1b1b","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Тогда мы собираемся в кружочек, смотрим отзывы, статистику прохождения и понимаем, что где-то рассказываем слишком сложно, а можно проще и лучше. И переделываем.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Как раз после такого ревью старых заданий мы сделали новый базовый курс по JavaScript. Сразу правильно работаем с вёрсткой, решаем типовые задачи и по ходу учимся применять новые технологии. Когда курсы устаревают, мы их переделываем и обновляем, потому что нет предела совершенству.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А теперь сделайте джаваскриптовую магию своими руками.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

«Знакомство с JavaScript» — бесплатно.

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":12,"reposts":0,"views":37,"hits":365,"reads":null,"online":0},"dateFavorite":0,"hitsCount":365,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/life/157273-kak-sozdayutsya-interaktivnye-kursy-razbiraem-poetapno","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199123,"name":"Личный опыт","description":"Расскажите о том, через что вы прошли самостоятельно: кейс в работе, продуктивность, личные финансы.","uri":"/life","avatar":{"type":"image","data":{"uuid":"68e0e807-2b43-55b9-9b76-b3f0f76f3d32","width":2400,"height":2400,"size":98919,"type":"jpg","color":"93dbd3","hash":"d0dc0c10303010","external_service":[]}},"cover":null,"lastModificationDate":1704109490,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"life","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":4}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":152858,"customUri":null,"subsiteId":300624,"title":"Пишем Телеграм-бота на JavaScript","date":1598360593,"dateModified":1598360593,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Для работы понадобятся"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Редактор кода, чтобы писать код. Если не знаете, какой выбрать — мы уже рассказывали. Если не умеете писать код, то вот инструкция, как его написать и запустить.","Node.js любой версии, выше 0.12. Нужно, чтобы библиотека для ботов заработала. Как установить Node.js.","Консоль. Или встроенный в систему вариант, или какой-нибудь другой.","VPN. Возможно но не факт, потому что Телеграм работает не везде."],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шаг 1. Регистрируем бота"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Находим в поиске Телеграма бота @botFather — это главный инструмент для создания ботов. Набираем в нём /newbot.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Придумываем название и имя боту. Название — то, как он будет подписан в списке контактов. Имя — строка, по которой его можно будет найти. Обратите внимание, что имя должно оканчиваться на bot. В ответ мы получим токен — длинную последовательность символов, которая пригодится нам в будущем. Мы назвали бота echoKeksBot, но вам придётся придумать другое название, потому что это уже занято. Извините.

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"cd870ec5-0f96-56b9-f812-104ba29af5e8","width":820,"height":362,"size":201517,"type":"png","color":"86ab7f","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шаг 2. Создаём проект"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Создаем папку в любом месте и открываем её в консоли. Там пишем npm init -y — эта команда создаст файл package.json, который выглядит примерно так:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"54ce3b43-ac1e-0576-24d0-05b917bf21fe","width":1640,"height":695,"size":895300,"type":"png","color":"1c1c1c","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Теперь установим node-telegram-bot-api — это библиотека для создания телеграм-ботов на Node.js. Введём команду:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"npm install --save --save-exact node-telegram-bot-api","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Создадим пустой файл index.js и напишем там самого простого бота, который будет отвечать на любое сообщение:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"bot.on('message', (msg) => {\n const chatId = msg.chat.id;\n bot.sendMessage(chatId, 'Привет, Друг!');\n});","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шаг 3. Запускаем бота"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Тут всё просто, в консоли пишем node index.js, заходим к нашему боту в телеграм и начинаем с ним общаться. Не закрывайте консоль — бот работает только на вашем компьютере, и без консоли он не станет отвечать.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"f01adefa-12ed-8313-a4dc-17752afeec36","width":820,"height":202,"size":457387,"type":"png","color":"c5c79d","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шаг 4. Отсылаем картинку"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Добавим картинку с Кексом в папку с проектом. Для отправки изображения используем метод .sendPhoto() — передадим в него id чата и путь до картинки. Получится такой код:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"bot.on('message', (msg) => {\n const chatId = msg.chat.id;\n bot.sendPhoto(chatId, 'keks.png');\n});","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Запускаем бота, проверяем, работает:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"52aec8d1-619c-0934-3d11-6c1c7c676c62","width":820,"height":233,"size":145337,"type":"png","color":"99b486","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Шаг 5. Добавим клавиатуру. И пёсика"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Добавим фотографию милого пёсика в корень проекта. Теперь там две картинки.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Создадим конфигурацию для клавиатуры в боте, пусть у нас будет 3 кнопки: «Хочу кота», «Хочу пёсика» и «Пойти учиться».

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"a43cfb82-8a66-dc84-b379-28bb75c8cd0b","width":820,"height":377,"size":37430,"type":"jpg","color":"799c74","hash":"","external_service":[]}}}]}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Конфиг клавиатуры\nconst keyboard = [\n [\n {\n text: 'Хочу кота', // текст на кнопке\n callback_data: 'moreKeks' // данные для обработчика событий\n }\n ],\n [\n {\n text: 'Хочу песика',\n callback_data: 'morePes'\n }\n ],\n [\n {\n text: 'Хочу проходить курсы',\n url: 'https://htmlacademy.ru/courses' //внешняя ссылка\n }\n ]\n];","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

На нажатия первых двух кнопок мы ответим соответствующим сообщением в Телеграме, а последняя уведёт на внешний ресурс.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы отличить первые 2 кнопки, воспользуемся полем callback_data, где будем передавать тип кнопки. Для обработки нажатий добавим слушателя на событие callback_query, и в зависимости от значения query.data отправим нужную картинку к пользователю.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Обработчик нажатий на клавиатуру\nbot.on('callback_query', (query) => {\n const chatId = query.message.chat.id;\n\n let img = '';\n\n if (query.data === 'moreKeks') { // если кот\n img = 'keks.png';\n }\n\n if (query.data === 'morePes') { // если пёс\n img = 'pes.png';\n }\n\n if (img) {\n bot.sendPhoto(chatId, img, { // прикрутим клаву\n reply_markup: {\n inline_keyboard: keyboard\n }\n });\n } else {\n bot.sendMessage(chatId, 'Непонятно, давай попробуем ещё раз?', {\n // прикрутим клаву\n reply_markup: {\n inline_keyboard: keyboard\n }\n });\n }\n});","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Не забудем про возможные ошибки и предложим пользователю попробовать снова, если он ввёл что-то не то. Перезапустим бота и проверим — всё работает. Главное — не закрывать консоль, иначе бот перестанет отвечать.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Полный файл с кодом: index.js.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":6,"favorites":64,"reposts":0,"views":23,"hits":29062,"reads":null,"online":0},"dateFavorite":0,"hitsCount":29062,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/152858-pishem-telegram-bota-na-javascript","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":13}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":144492,"customUri":null,"subsiteId":300624,"title":"Как найти работу начинающему программисту. 6 советов для джуна","date":1595505403,"dateModified":1595505403,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Рассказывает Наталья Ёркина, тимлид из Ostrovok.ru. Полное интервью с Натальей можно посмотреть тут.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Не обманывайте и не приукрашайте"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Совет состоит из двух пунктов:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Если пишете в резюме, что вы что-то знаете, значит у вас должно быть хотя бы представление о том, что вы написали.","Если говорите, что вы что-то умеете, помните, что люди всё равно это проверят.
"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Часто кандидат рассказывает, что он всё умеет, но в итоге не может ответить ни на один базовый вопрос. Лучше прийти и сказать: «Я прочитал учебник по реакту, но я на нем никогда не писал». Это подразумевает, что вы не умеете писать на React.js и будете плавать в ответах на вопросы, но это честная позиция, которая не вызывает отрицательной реакции.

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"ea24c109-6a8a-c72b-9272-fc43ecca0a40","width":1640,"height":1027,"size":243206,"type":"png","color":"0c0c0c","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Рассказывайте о своих плюсах"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Это очень важный навык для многих работодателей.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"571b4e7e-d248-8e2a-07b9-884e13606761","width":1640,"height":1017,"size":236420,"type":"png","color":"0c0c0c","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Приходите на собеседование с планом развития"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Работодателю сразу становится понятно, что пришёл заинтересованный кандидат, готовый заниматься саморазвитием.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В самом коротком варианте план звучит так: «Я не знаю это и это, но планирую это изучать таким-то образом». То есть не только ждите, что кто-то из команды расскажет, как и что делать, но и двигайтесь по своему плану. Даже если вас не возьмут на работу, то у вас всё будет хорошо, потому что вы знаете, чего хотите.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"b4fe125c-a709-5615-ca22-77a95bfe2c92","width":1640,"height":1043,"size":274405,"type":"png","color":"cbcbcb","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Как писать план развития? Записывайте всё, что вызывает у вас вопросы и проблемы в работе, а потом группируйте по темам. Из этих тем составляйте план, как это изучать — курсы, книги, дополнительные материалы, работа со специалистами и так далее.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Ведите себя естественно"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

После многих пройденных собеседований я до сих пор чувствую себя на них неуверенно. Если боитесь, придите и скажите: «Я сейчас очень нервничаю», чтобы люди понимали, что вы себя некомфортно чувствуете. Возможно, из-за этого вам дадут более подробное тестовое задание на дом и не будут задавать много вопросов на собеседовании.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"5a300a41-85af-022d-7a4e-02ef7607e5a2","width":1640,"height":892,"size":212047,"type":"png","color":"0e0e0e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Постарайтесь вести себя как обычно, ничего не скрывать и говорить, как есть, потому что это очень сильно располагает к людям.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Не всегда стоит начинать с компании-мечты"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Иногда имеет смысл начинать с маленьких и не очень популярных мест, куда охотнее берут джунов, например, чтобы просто получить какой-то опыт и понять, как строится работа программиста или верстальщика. И только после этого идти в компанию мечты, потому что компания мечты — это что-то, как правило, крупное, с очень высокими требованиями. А набраться опыта можно в любой компании (потому что компаний миллион, см. следующий пункт).

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"e5154523-b605-c37a-0913-37a319288cba","width":1640,"height":1075,"size":260499,"type":"png","color":"0d0d0d","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Не переживайте, если не получилось"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Всегда, даже после неудачных собеседований, стоит просить у компании обратную связь. Это поможет лучше понимать, как проходят собеседования, какие бывают требования, и что улучшить к следующему разу. К тому же, собеседования — возможность учиться у сильных разработчиков. Учитывайте все замечания, чтобы получить максимум выгоды из любого отказа.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Я знаю много людей, которые не опускали руки, продолжали ходить на собеседования, и с десятой попытки получалось. Поэтому не переживайте, все эти собеседования — тоже практика.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"425b6c25-b9b7-859f-0522-f53a9de7aa3f","width":1640,"height":1102,"size":248519,"type":"png","color":"0f0f0f","hash":"","external_service":[]}}}]}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":13,"favorites":21,"reposts":0,"views":16,"hits":2447,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2447,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/hr/144492-kak-naiti-rabotu-nachinayushemu-programmistu-6-sovetov-dlya-dzhuna","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199121,"name":"Карьера","description":"Всё о сотрудниках и личном карьерном росте. Как нанимать, строить внутренние процессы, управлять командой, где искать работу и какие сейчас зарплаты.","uri":"/hr","avatar":{"type":"image","data":{"uuid":"7e34636c-3189-5ba0-a2b3-c1c9ee18b5ba","width":1200,"height":1200,"size":123655,"type":"png","color":"b55467","hash":"1c10103828607050","external_service":[]}},"cover":{"type":"image","data":{"uuid":"144c0e97-a576-513b-bced-8d560cb0c16f","width":960,"height":280,"size":177,"type":"png","color":"ccf4ec","hash":"","external_service":[]}},"lastModificationDate":1602856647,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"hr","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":5}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":137541,"customUri":null,"subsiteId":300624,"title":"«Вы просто нажимаете на кнопки, любой так может». 18 глупых вопросов тестировщику","date":1593169240,"dateModified":1593169240,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Мы задаём глупые вопросы профессионалам, с которыми верстальщики часто сталкиваются в работе.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Давно ли ты в отрасли, и чем занимаешься сейчас?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В IT чуть больше 6 лет, из них 4.5 года — тестировщиком. Сейчас работаю в Яндекс.Деньгах, а до этого почти 4 года работал в 2ГИСе. В Яндекс.Деньгах работаю в одной из команд Яндекс.Кассы, команда занимается преимущественно бэкендом.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Кто такой тестировщик в семи словах?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Человек, который тестирует, пишет автотесты, отвечает за качество.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Зачем сайтам тестирование?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Почему всё это не должны делать сами разработчики?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Экономия времени разработки.","Для контроля — разработчик может полениться и не проверить все кейсы досконально."],"type":"OL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Что тестировщиков бесит в верстальщиках?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Я никогда не работал с верстальщиками в чистом виде. Когда пришел работать в 2ГИС, тестировать онлайн-версию, в команде были разработчики и фронтендеры. Фронтендеры тоже писали код, отвечающий за логику отображения всего в приложении, а не только делали вёрстку. Разработчики делали бизнес-логику.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Через какое-то время это разделение вообще пропало — все стали делать всё.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— А в программистах?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Когда на очевидные косяки начинают отмазываться, что это не баг, и вообще, так и должно быть.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Какой самый главный миф о работе тестировщика? Развеешь его?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Самая частая ошибка, которую ты находишь на страницах?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Самая частая — 500 (Internal Server Error).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Где грань, после которой говоришь верстальщику или программисту «Тут надо переделать всё»? Было ли у тебя такое?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

«Надо переделать всё» ни разу не говорил, но бывало так, что программист сделал не то, что нужно, и ему приходилось начинать заново.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Самое долгое исправление бага в твоей жизни?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Бесконечность. Найденные баги приоритизируются, и большинство из багов, которые незначительно влияют на пользователей, откладывается в бэклог с тем, чтобы никогда оттуда не выбраться.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Что ты больше всего не любишь в своей работе?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Не люблю косячить. То самое стремное чувство, когда баг нашел не ты, а пользователи.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— А что больше всего любишь?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Есть миф, что после тестирования не становятся программистами.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сталкивался с суждением, что тестировщик — какое-то начальное звено карьеры в IT, и нормальный человек должен через пару лет эволюционировать в разработчика или менеджера. Отчасти это так, если говорить о ручном тестировании. Заниматься этим регулярно может показаться довольно скучным.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если ты занимаешься автоматизацией, нагрузочным тестированием, управлением тестированием или ещё чем-то, то это вполне себе значимая профессия. Сталкивался с тестировщиками, которые стали программистами, менеджерами продуктов / проектов / руководителями групп разработки. Возможно всё.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Программист — друг или враг тестировщика?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Друг, конечно. Цели — общие, задачи тоже общие. С программистами вообще нужно общаться как можно больше по работе, потому что зачастую они могут знать, что могло сломаться в коде, но умолчать эту информацию.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Совет верстальщикам, которые хотят никогда не получать макет на переделку обратно?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

О, у меня есть много советов:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Уточните список браузеров, в которых страница должна работать, и проверьте, будут ли во всех из них работать то, что вы используете, например на caniuse. Чаще всего проблемы бывают с Internet Explorer.
","Если нет макетов каких-то сценариев, не стесняйтесь попросить об этом дизайнера. Сделаете самостоятельно — придёт продакт и скажет, что надо переделывать.
","Не поленитесь проверить то, что сделали, самостоятельно. Желательно не в одном браузере.
"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Бывает ли такое, что на сайт вообще никто из людей во время тестирования не смотрит, и почему?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Такое может быть, если не добавляется новой вёрстки. Тогда можно проверить правки на бэкенде, а то, что ничего не сломалось, проверят автотесты.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Худшие последствия, к которым в твоей практике приводило некачественное тестирование?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Часовой простой сервиса с аудиторией в 20 миллионов человек в месяц. К счастью, тестировал задачу не я.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

— Как измерить успех тестировщика?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Например, по соотношению скорость тестирования / количество инцидентов на проде. Совсем без багов не получится, но чем реже они будут, тем лучше. Ну и чем быстрее ты будешь тестировать, тем быстрее новую функциональность увидят пользователи.

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":4,"favorites":10,"reposts":0,"views":16,"hits":1934,"reads":null,"online":0},"dateFavorite":0,"hitsCount":1934,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/hr/137541-vy-prosto-nazhimaete-na-knopki-lyuboi-tak-mozhet-18-glupyh-voprosov-testirovshiku","author":{"id":300624,"name":"HTML Academy","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"5ff38e56-301e-5acf-861c-e5f1e0cc47ae","width":447,"height":373,"size":6023,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"cb6738fc-70cc-53a2-8fb6-65082f5fb1c4","width":803,"height":203,"size":26658,"type":"png","color":"7b4df8","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5123384,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5123384"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1499297,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1499297"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":272589,"userId":300624,"count":0,"shareImage":"https://api.vc.ru/achievements/share/272589"}],"lastModificationDate":1765002494,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199121,"name":"Карьера","description":"Всё о сотрудниках и личном карьерном росте. Как нанимать, строить внутренние процессы, управлять командой, где искать работу и какие сейчас зарплаты.","uri":"/hr","avatar":{"type":"image","data":{"uuid":"7e34636c-3189-5ba0-a2b3-c1c9ee18b5ba","width":1200,"height":1200,"size":123655,"type":"png","color":"b55467","hash":"1c10103828607050","external_service":[]}},"cover":{"type":"image","data":{"uuid":"144c0e97-a576-513b-bced-8d560cb0c16f","width":960,"height":280,"size":177,"type":"png","color":"ccf4ec","hash":"","external_service":[]}},"lastModificationDate":1602856647,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"hr","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":4}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"cursor":"PuR2GsZKFTvhhGtSAovm6drVS6IzQAa09I6wtbz/zlbeaPDONLanxExd62hAlW4=","isAnonymized":true}};