Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Сервисы
AI
Личный опыт
Деньги
Инвестиции
Право
Карьера
Путешествия
Крипто
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения

Фронтенд

Altenar

Как созданный в спешке язык программирования изменил мир?

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

Как созданный в спешке язык программирования изменил мир?
1
ZamaCode
Разработка

Фронтэнд или бэкэнд: что учить первым и как выбрать?

Фронтэнд или бэкэнд: что учить первым и как выбрать?

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

Trepolsky Dmitry
Дизайн

Топ-10 современных инструментов для дизайнеров: лучшие решения для работы с интерфейсами и прототипами

Привет! Я занимаюсь digital-маркетингом и стратегическим контентом, и сегодня хочу представить вам актуальную подборку лучших сервисов для дизайнеров, UI/UX-специалистов и команд, работающих над цифровыми продуктами. В обзоре я рассмотрел 10 современных платформ, которые позволяют создавать интерфейсы, работать с визуальным контентом, разрабатывать…

41
1
Надежда Вильбоа
Личный опыт

Три канала в Telegram, которые ломают стереотипы

🌐 frontend от ежетты

Колючая айтишница

1
Безумный айтишник
Личный опыт

React, Vue или Angular? Другой взгляд на выбор JavaScript-фреймворка

React, Vue или Angular? Другой взгляд на выбор JavaScript-фреймворка

По мере работы с самой популярной троицей JS-фреймворков, а именно React, Vue, Angular, я пришел к некоторому заключению на тему того, как выбрать фреймворк именно под себя, какой изучать, как войти во фронт/кроссмобайл с нуля или с бэкенда.

6
Логема
Разработка

Провели аудит и ускорили работу агрегатора курсов обменных пунктов валют в 1,5 раза

Новый кейс про успешную оптимизация информационного сайта, внедрение асинхронной загрузки компонентов, настройку Git-репозитория и создание контейнерной структуры.

Провели аудит и ускорили работу агрегатора курсов обменных пунктов валют в 1,5 раза
1
Техноманьяк

Лучший инструмент для деплоя приложений | VPS + Coolify

Если вы ищете инструмент для деплоя приложений, который ничего не стоит (он БЕСПЛАТНЫЙ), обратите внимание на Coolify.

Техноманьяк
Разработка

Бесплатный Деплой Frontend приложения на Сервер с помощью Vercel | Как пользоваться Vercel?

Подготовил видеоинструкцию по Деплою любого Frontend приложения на React, Next js, Angular и Vue:

1
Selectel
Разработка

Шпаргалка по SEO для веб-разработчиков: что учесть при верстке сайта, чтобы он взлетел в поисковой выдаче

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

Шпаргалка по SEO для веб-разработчиков: что учесть при верстке сайта, чтобы он взлетел в поисковой выдаче
12
Александр Ширяев
Разработка

VIB - Интерактивный учебник по Vue.js

Привет! Меня зовут Александр и я опытный frontend-разработчик в области e-commerce, специализируюсь на разработке больших высоконагруженных приложений таких как маркетплейсы с высокой посещаемостью и объемной бизнес логикой. Работал в таких крупных компаниях как Коммерсантъ, Л`Этуаль, Камаз

Подробнее обо мне тут:

3
Fusion Tech
Разработка

Фронтенд-разработка — как она помогает масштабировать бизнес?

Способны ли разработчики увеличить доходность компании клиента? Еще как! В этой статье мы посмотрим на фронтенд-разработку с точки зрения пользы для бизнеса. Проследим основные этапы ее создания, а также расскажем, в каких коммерческих отраслях она наиболее необходима.

Фронтенд-разработка — как она помогает масштабировать бизнес?
7
3 ответа на пост
Trepolsky Dmitry
Карьера

Сколько зарабатывают frontend разработчики. Перспективы работы в России и в мире в 2023 году

Друзья, привет!
При построении карьеры в сфере веб-разработки, у вас, несомненно, может возникнуть много вопросов. Какие языки программирования следует изучать? Как выглядит рынок труда сегодня? На какую зарплату вы можете рассчитывать, получив заветную должность?

Современная веб-разработка включает различные пути развития, каждый из кот…

59
\n","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Деплой HTML-кода на облачный сервер"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Итак, мы создали HTML-документ по всем правилам семантической верстки и применили OG-разметку. Теперь задеплоим его на облачный сервер. Можно собрать минимальную конфигурацию за 30 рублей в день, потому что сейчас большие мощности нам не нужны.

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

Идем в панель управления и переходим в раздел Облачная платформа.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"cc1d6c30-9b3d-5860-9ce9-53445e13b196","width":1448,"height":764,"size":120028,"type":"png","color":"e1e4e9","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgMJ/8QAIhAAAQQBAgcAAAAAAAAAAAAAAQACAxEEEkETIjE0UXKR/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/ANSA2SThPjeXM078wvygRjxbNwx3v0RMLD7eP1CUipjYTZY34iV//9k="}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Здесь создаем сервер произвольной конфигурации. Для простого HTML мы можем обойтись одним ядром vCPU, 512 МБ оперативной памяти и 8 ГБ места на SSD:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"11ab7085-d084-5003-8246-2e31eee3a80a","width":1870,"height":764,"size":159617,"type":"png","color":"e5edf2","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAEJ/8QAIBAAAgEEAQUAAAAAAAAAAAAAAQIRAAMEIZESEyJTkv/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAwDAQACEQMRAD8A0/tNizDPeAJJ0pgHirxaz3DRl44EdZ+TRincHxXY2B5HTwN0VS9y57G5pD//2Q=="}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Создаем сервер и подключаемся к серверу по SSH — отлично, осталось подготовить веб-сервер.

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

1. Чтобы устанавливать только актуальные пакеты, обновляем репозиторий:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"sudo apt update","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

2. Устанавливаем Nginx, чтобы раздавать наш index.html:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"sudo apt install nginx","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

3. В папке sites enabled устанавливаем Vim, чтобы редактировать текстовые файлы.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"/etc/nginx/sites-enabled# apt install vim","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

4. Находим root — это место, где будет храниться HTML-файл. В нашем случае это папка var/www/html. Идем туда и создаем index.html:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"vim index.html","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

5. Копируем в открывшийся текстовый редактор наш HTML-код, выходим из Vim.

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

6. Перезапускаем Nginx:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"sudo service nginx restart","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы убедиться, что все работает, вставляем в адресную строку браузера публичный IP-адрес облачного сервера. Видим заветную строку «Hello world», все работает.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"35b74006-ec9a-5929-9677-0764d17d344b","width":1920,"height":665,"size":27294,"type":"png","color":"e8eaf2","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDCf/EAB0QAAICAQUAAAAAAAAAAAAAAAACAwQBEyFTgZH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A1OWtXXZYUx0XaHoQ8SeDaKEAB//Z"}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Но IP-адреса все же недостаточно: если мы вставим его, например, в Telegram, мессенджер его никак не обработает, потому что это не ссылка.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"7f45eecf-1212-55cc-8844-bd41fb9244a2","width":285,"height":82,"size":12943,"type":"png","color":"eaf9da","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwIJ/8QAIhAAAQQABQUAAAAAAAAAAAAAAQACAxEEISIzkgUVUVLS/8QAGAEAAgMAAAAAAAAAAAAAAAAAAgUAAQT/xAAfEQACAgEEAwAAAAAAAAAAAAAAAQISEUNRsdETMaH/2gAMAwEAAhEDEQA/ANEmzwZnuLQ31Do6bQuhp8G0npLGPELbr3fgESQuAc3r5IOY1Q/CNwktFfewLJ6nHRLcRiL35ORSm8tzWkIJ563n8ipeW5aSP//Z"}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы получить ссылку, нужен домен. Мы берем готовый от Ulbi TV, но вообще получить новый домен можно на любом регистраторе.

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

Указываем для домена IP-адрес нашего сервера, чтобы связать их. DNS-серверу потребуется какое-то время, чтобы все обработать — от 2 часов до суток. И вот, домен уже выдает «Hello world».

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

Теперь самое интересное. Скидываем эту ссылку в соцсети и видим, как красиво туда подтянулась наша OG-разметка:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"cd51f190-978e-5514-b798-9b5e891c9f90","width":263,"height":142,"size":47678,"type":"png","color":"e3f3d4","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwUI/8QAJxAAAQMCBAUFAAAAAAAAAAAAAQIDBAARBQYHIQgSFSQxU4GRk9H/xAAXAQEBAQEAAAAAAAAAAAAAAAAFBAED/8QAIBEAAgEDBAMAAAAAAAAAAAAAAQIAAxESBFFx0QUxkf/aAAwDAQACEQMRAD8A3K7mLNSYkp6LlaS9IbjuOMtFLiA44lJKU3KrC5AHvQK1GuM7W4EPWkxYC/vnuHI1n4hUAIVoJIJTsbLQR8829LCl41hck/R1KTp3U2zWKZxPErkdQk/ar9oORZNvJ6ps257t7z6hrJyybef/2Q=="}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Человекопонятные ссылки"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Когда вы видите ссылку https://cars.qq/auto/123/model/456, что вы можете предположить о содержании страницы, на которую она ведет? Из домена очевидно, что это что-то о машинах, и на этом все. А когда вам присылают ссылку https://cars.qq/auto/bmw/model/m5, вы сходу понимаете, что она ведет на страницу, связанную с BMW М5: это какая-то статья или объявление о продаже автомобиля. Этот url понятен человеку, там нет никаких идентификаторов или непонятных чисел.

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

Вот еще пара примеров из интернета. Ссылки слева — неинформативные, включающие index.php, category и цифры. Ссылки справа — осмысленные и легкочитаемые. Кстати, ключевые слова в ссылках тоже помогают в ранжировании страницы.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"35a91770-b025-5bad-a133-8b790b42a5a2","width":1702,"height":172,"size":89738,"type":"png","color":"141a1c","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABgAJ/8QAHRAAAgIBBQAAAAAAAAAAAAAAAQIABAMFBhEj0v/EABcBAQEBAQAAAAAAAAAAAAAAAAUAAgP/xAAeEQACAQMFAAAAAAAAAAAAAAAAAQIDIdEEBRGRkv/aAAwDAQACEQMRAD8AzsnUwI8e3tPZFYtZ5IBPfX9wl66qnxbqeAOW5Vk2reZ4DkWHCkR//9k="}}}]}},{"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":"

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

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

По сути, это мусорный контент, который тратит краулинговый бюджет и конкурирует с исходным линком при индексации поисковиками. Чтобы этого избежать, указываем каноническую ссылку — индексироваться будет только она, а остальные перестанут восприниматься как дубликаты. Для этого идем в блок header HTML-документа и указываем линк, в котором rel=\"canonical\", а в href размещаем прямую ссылку на страницу. Вот так это выглядит в коде со страницы Хабра:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"Чтобы канонические ссылки всегда имели унифицированный вид, используются базовые редиректы. Их можно настроить на уровне Nginx-конфига. Редиректы автоматически перенаправляют пользователей со страницы с www в адресе на страницу без www, с http — на https (http вообще нигде не должен фигурировать), со страниц без / в конце адреса — на страницы с / в конце.","subline1":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Контроль поисковых движков"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Метатег robots"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

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

В HTML-документе указываем метатег . Содержание его контентной части определяет действия робота. Запись index — значение по умолчанию, при нем робот будет индексировать страницу. Если указать \"noindex\", страница индексироваться не будет.

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

То же работает и с другими контентными значениями:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["follow разрешает роботу ходить по ссылкам, nofollow — запрещает;","archive — показывать ссылку на сохраненную копию в результатах поиска, noarchive — не показывать;","noyaca — не использовать сформированное автоматически описание;","all — использовать директивы index и follow;","none — использовать директивы noindex и nofollow."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

С помощью метатега robots можно запретить индексировать страницу в Яндексе, но сохранить индексацию для Google:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Разрешающие директивы имеют приоритет над запрещающими: если не прописывать метатег noindex, страница и ссылки по умолчанию будут индексироваться всеми поисковиками. Метатеги нужны только тогда, когда мы хотим что-то запретить.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Файл robots.txt"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Этот файл нужен, чтобы разрешить или запретить индексирование разделов или страниц сайта для разных роботов. Хотим исключить какую-то страницу сайта из индексации для всех поисковиков — без проблем. То же самое, если хотим сделать, чтобы какая-то страница индексировалась Яндексом, но не индексировалась системой Google.

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

Вот так мы запрещаем поисковику Google индексировать страницу с контактами:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"User-agent: Googlebot\ndisallow: /contacts","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

А так, поставив *, запрещаем Яндексу индексировать все страницы раздела с админкой:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"User-agent: Yandex\ndisallow: /admin/*","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Из важного: этот файл должен находиться в корне проекта, чтобы робот смог до него достучаться, и быть не более 500 КБ.

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

Посмотреть содержимое файла robots.txt для любого сайта просто: достаточно к ссылке на главную страницу добавить robots.txt после /. Например, содержимое файла для сайта Selectel смотрим здесь: https://selectel.ru/robots.txt.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"5a417ee0-98cc-5991-a0f4-522cf5bfa27f","width":841,"height":860,"size":30658,"type":"png","color":"281115","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYJ/8QAIhAAAgECBQUAAAAAAAAAAAAAAQIDAAUEBhEhoRITMVPR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/ANJMmHFyRMiXCMRroTF0AuNhuTQVnbb3Px8oA8oEm3DU+Cw5oH6D/9k="}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Все, что не запрещено, считаем разрешенным.

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

В конце документа есть ссылки, ведущие на sitemap.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"5b5e7b12-3426-5de4-bfb8-d86585cf30f4","width":572,"height":65,"size":9352,"type":"png","color":"291212","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAgQGCf/EACMQAAIBAwQBBQAAAAAAAAAAAAEDAgQFBgAREjEUISIjVJL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A0KsWb3Ovt1wqnZfY3lElxi5NK3gv5WRIKyBIn2iJO+wMSdgNCGUZnc2oWw5Njs+cBLlAM4ncdj061cVeRpqeBJghcSe9ogaiB8Ok+qn8DQf/2Q=="}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Sitemap, или карта сайта, — это XML-документ, в котором указывается актуальная структура сайта со всеми ссылками и датами, когда эти ссылки изменялись. Здесь для каждой страницы можно задать четыре свойства: адрес самой страницы (тег ), дата последнего обновления (), частота изменения страницы () и приоритет (). Например, если вы хотите, чтобы какие-то страницы индексировались лучше других, для каждой их них можно установить приоритет индексации от 0 до 1 с шагом 0,1.

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

Sitemap строится из канонических ссылок и имеет ограничение по размеру в 50 МБ. Если страниц и ссылок так много, что 50 МБ не хватает, или вы хотите создать большую древовидную структуру, то внутри базового sitemap можно разместить ссылки на другие файлы sitemap. Чтобы индексатор узнал о том, что у вас есть эта карта сайта, указываем в robots.txt ссылку на sitemapindex.xml (как на скрине выше).

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

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Поддержка мобильных устройств"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Есть такая технология — AMP, или Accelerated Mobile Pages. Проще говоря, она позволяет разрабатывать быстрые версии страниц для мобильных устройств. При этом Google лучше ранжирует такие страницы.

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

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

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

Как именно работает AMP, можно почитать в документации. В контексте SEO самое важное, что Google при индексации и ранжировании результатов отдает предпочтение именно быстрым AMP-страницам. Он определяет их по специальным тегам, которые добавляются при разработке.

"}},{"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":"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":"

LCP (Largest Contentful Paint) — время, за которое загрузился самый большой видимый элемент страницы. Хороший показатель — не более 4 секунд, отличный — не более 2,5 секунд. Очевидно, если весь бандл и фронтенд весят 200 КБ, они загрузятся быстро. Если же бандл не оптимизирован, весит 5 МБ и все подгружается одним цельным куском, на загрузку страницы может уйти секунд 10, а в случае с нестабильным интернетом — еще больше.

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

FID (First Input Delay) — время до первой интерактивности. Другими словами, это время с момента загрузки страницы до появления у пользователя возможности взаимодействовать с ней: вводить текст, нажимать кнопки, переходить по ссылкам и так далее. Если FID укладывается в 0,3 секунды, все хорошо. Если нет, над сайтом стоит поработать. FID значительно меньше LCP, потому что какие-то элементы страницы могут подгружаться медленно или асинхронно и, пока они не загрузились, пользователь уже может взаимодействовать с другими элементами.

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

CLS (Cumulative Layout Shift) — метрика, которая отвечает за визуальную стабильность. Сталкивались с ситуацией, когда хотите нажать на какую-нибудь кнопку, а тут «Бах!» — где-то сверху подгружается еще один блок, кнопка смещается вниз, и вы нажимаете на что-то не то? Это пример визуально нестабильной страницы, и такого, конечно, быть не должно. Даже если элементы страницы подгружаются асинхронно, до полной загрузки вместо них должна быть заглушка, чтобы верстка не съезжала и пользователи не испытывали дискомфорта. CLS измеряется в баллах, показатель не должен превышать 0,25.

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

Для измерения метрик удобно использовать сервис Page Speed Insights от Google. Разумеется, кроме LCP, FID и CLS здесь можно посмотреть огромное количество других параметров, связанных с производительностью, доступностью, безопасностью и так далее. Удобно, что можно измерять параметры и для десктопной, и для мобильной версии сайта.

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

В браузере есть похожий встроенный инструмент — Lighthouse, на основе которого и сделан Page Speed Insights. Принцип работы прост: переходим на нужную страницу, нажимаем F12 и выбираем вкладку Lighthouse. Задаем нужные настройки, нажимаем Analyze page load, ждем и получаем результат анализа. В целом, все практически то же самое, что в Page Speed Insights, хотя по отдельным метрикам показатели могут незначительно различаться.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Валидность HTML"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сайты с невалидным HTML-кодом гораздо хуже индексируются поисковиками, медленнее загружаются, а иногда и вовсе объявляются опасными. Проверить валидность можно с помощью классического W3-валидатора, в котором достаточно указать адрес нашей страницы.

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

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

"}},{"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":"

Важно понимать, что заниматься этой работой стоит тогда, когда вы боретесь за десятые и сотые доли процента SEO. Это актуально, например, для маркетплейсов-гигантов. Если у вас небольшой сайт, лучше отложить оптимизацию краулингового бюджета и заняться более актуальными вопросами: улучшить качество контента, поработать с ключевыми словами, настроить Open Graph и так далее.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Заключение"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Ключевым фактором SEO остается контент. Тем не менее, технические детали также важны: семантика, валидный HTML, канонические ссылки, ключевые слова в линках, AMP и так далее — все это помогает поднять страницу в результатах поисковой выдачи.

"}},{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"Если у вас остались вопросы, вы хотите поделиться собственными кейсами поисковой оптимизации или обсудить что-то, связанное с SEO, — добро пожаловать в комментарии.","subline1":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Читайте также"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Как продвигать игры с помощью YouTube Shorts. Опыт инди-разработчика","5 малюток для разработки и игр: новые модели миниатюрных ПК
","Как управлять временем и приоритетами? Методика Eat that frog, принцип Парето и матрица Эйзенхауэра
"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#selectel #разработка #разработкасайтов #программирование #версткасайтов #seo_оптимизация #фронтенд

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":7,"favorites":15,"reposts":0,"views":2531,"hits":863,"reads":null,"online":0},"dateFavorite":0,"hitsCount":863,"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/dev/1200372-shpargalka-po-seo-dlya-veb-razrabotchikov-chto-uchest-pri-verstke-saita-chtoby-on-vzletel-v-poiskovoi-vydache","author":{"id":172558,"name":"Selectel","nickname":null,"description":"Крупнейший независимый провайдер сервисов IT-инфраструктуры в России. Облачные серверы от 29 ₽/час: slc.tl/bfnnu","uri":"","avatar":{"type":"image","data":{"uuid":"bdaede51-3c77-55c3-a3ab-e9940df92258","width":640,"height":640,"size":103719,"type":"jpg","color":"d2454a","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAICAgICAQICAgIDAgIDAwYEAwMDAwcFBQQGCAcJCAgHCAgJCg0LCQoMCggICw8LDA0ODg8OCQsQERAOEQ0ODg7/2wBDAQIDAwMDAwcEBAcOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAIG/8QAIRAAAgEDBQADAAAAAAAAAAAAAQIDBAURAAYHITEIEiP/xAAVAQEBAAAAAAAAAAAAAAAAAAAEBf/EAB4RAAEDBAMAAAAAAAAAAAAAAAECAwQABREhQYHB/9oADAMBAAIRAxEAPwA8cV8WcVX34ebqv98rlj3FSozQO9yjhWMBcj8zlnLHzrB8yND6e2Wxa2ZRUhQHIA+3nertk8y7UqQszgDOAHPWsoSSSSck+nVKMw4h1wlwnJpl4uMR2FFSiMlJCdkc6A8z2a//2Q=="}},"cover":{"cover":{"type":"image","data":{"uuid":"861886cd-1ef2-5754-af38-6219cc645017","width":1280,"height":511,"size":28049,"type":"jpg","color":"142434","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAcFBQYFBAcGBgYIBwcICxILCwoKCxYPEA0SGhYbGhkWGRgcICgiHB4mHhgZIzAkJiorLS4tGyIyNTEsNSgsLSz/2wBDAQcICAsJCxULCxUsHRkdLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCz/wAARCAAKAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAGhAAAQUBAAAAAAAAAAAAAAAAAAEDE1SSAv/EABUBAQEAAAAAAAAAAAAAAAAAAAQF/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AxOFmymFELNnnKkQNT3//2Q=="}},"cover_y":57},"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":5249500,"userId":172558,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5249500"},{"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":1625413,"userId":172558,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1625413"},{"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":398705,"userId":172558,"count":0,"shareImage":"https://api.vc.ru/achievements/share/398705"}],"lastModificationDate":1764936082,"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":12}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":960009,"customUri":null,"subsiteId":2709108,"title":"VIB - Интерактивный учебник по Vue.js","date":1703012845,"dateModified":1703012845,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Привет! Меня зовут Александр и я опытный frontend-разработчик в области e-commerce, специализируюсь на разработке больших высоконагруженных приложений таких как маркетплейсы с высокой посещаемостью и объемной бизнес логикой. Работал в таких крупных компаниях как Коммерсантъ, Л`Этуаль, Камаз

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

Подробнее обо мне тут:

"}},{"type":"link","cover":false,"hidden":false,"anchor":"","data":{"link":{"type":"link","data":{"url":"https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Falexander-shiryaev.ru%2F%3Fref%3Dvc.ru&postId=960009","title":"Alex-dev","description":"","image":{"type":"image","data":{"uuid":"https://leonardo.osnova.io/ico/alexander-shiryaev.ru","width":0,"height":0,"size":0,"type":"jpg","color":"","hash":"","external_service":[]}},"v":1,"hostname":"alexander-shiryaev.ru"}}}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Подписывайтесь в телеграм

"}},{"type":"link","cover":false,"hidden":false,"anchor":"","data":{"link":{"type":"link","data":{"url":"https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ft.me%2Fvib_online%3Fref%3Dvc.ru&postId=960009","title":"VIB - заметки frontend","description":"Заметки и интересные подробности по разработке платформы VIB (Vue interactive book) Заходите учиться https://vib-online.ru","image":{"type":"image","data":{"uuid":"0c5ec522-6456-5837-a7a9-efa6a12645d2","width":180,"height":180,"size":4016,"type":"png","color":"26a5e4","hash":"","external_service":[]}},"v":1,"hostname":"t.me"}}}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Проект только в процессе запуска, будет много интересного, подпишись чтобы ничего не пропустить :)

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

Vue interactive book включает в себя текстовые уроки, тестирование и практические задания - https://vib-online.ru

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Пара слов о проекте"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

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

Цели проекты

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Предоставить удобный сервис для качественного обучения","Популяризировать vue в ру сегменте"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Преимущества платформы VIB

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Источник качественной теоретической информации","Возможность закрепить теорию (за счет тестирования)","Возможность разобраться во всех деталях на практике (практические задания)"],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Что такое Vue"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Vue.js это JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле. На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких как Netlify, Netguru, Baidu, Livestorm.

"}},{"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":"

В 2013 году сотрудник Google Эван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений: React тогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или ориентированный на MVC-архитектуру Backbone.js, не отличавшиеся простотой и ориентированные на разработку больших приложений. Для преодоления этого пробела Ю начал разработку Vue.js, которая, сохраняя простоту, оказалась пригодна не только для прототипирования, но и для полноценной разработки

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

В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0. Начиная с версии 2.0 он поддерживает также рендеринг на стороне сервера, он же SSR (Server-Side Rendering).

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

Переход на 3-ю версию18 cентября 2020 года была выпущена версия Vue.js 3.0.0 «One Piece», по словам разработчиков «обеспечивает улучшенную производительность, меньший размер пакетов, лучшую интеграцию с TypeScript, новые API для решения крупномасштабных задач и прочную основу для будущих итераций фреймворка в долгосрочной перспективе»

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

Релиз 3.0 вобрал в себя более 2 лет усилий по разработке, включая более 30 RFC, более 2600 коммитов, 628 запросов от 99 разработчиков, плюс огромный объём работы над разработкой и документацией. Весь код был переписан на более эффективный TypeScript, что даёт преимущества в гибкой разработке. Также представлен новый набор API Composition

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Мировое признание"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества. Vue версии 2 имеет 204 тысячи звезд на GitHub, версия 3 — 38 тысяч. Является третьим по величине проектом в истории GitHubКонцепцияПодходы и структура

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

Разработчики называют Vue.js прогрессивным и постепенно адаптируемым по сравнению с другими веб-фреймворками. Это позволяет разработчику настроить структуру приложения в соответствии с собственными требованиями.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Эффекты перехода"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Vue предоставляет различные способы применения эффектов перехода при вставке, обновлении или удалении DOM. Включает следующие инструменты： Автоматически применять CSS классы при переходах и анимации Вы можете работать со сторонними библиотеками анимации CSS, такими как Animate.css. Используйте JavaScript функции для перехвата перехода, чтобы напрямую управлять DOM Может использоваться в сочетании со сторонними библиотеками анимации JavaScript, такими как Velocity.js.

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

Разработчики считают Vue.js более простым в освоении, чем AngularJS, поскольку API построен намного проще в освоении. В Vue.js можно использовать только знания JavaScript и HTML. Возможно применение Typescript. У Vue.js есть собственная официальная достаточно богатая документация на многих языках, выложенная на vuejs.orgкоторая может послужить примером в объяснении проектирования и разработки в браузере.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Реактивность"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Реактивность означает, что представление в модели MVC изменяется по мере изменения модели. В Vue разработчики просто привязывают представление к соответствующей модели, и Vue автоматически наблюдает за изменениями в модели и перерисовывает представление. Эта функция делает управление состоянием Vue довольно простым и интуитивно понятным.

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

В Vue.js реализуется шаблон MVVM, Vue.js предлагает возможность привязки данных на Javascript, так что вывод и ввод данных сопрягаются непосредственно с источником данных. Таким образом, режим ручного определения данных (например, через jQuery) из HTML-DOM не нужен. При этом нет необходимости в никаких дополнительных аннотациях, как в Knockout.js, объявленные в Vue-Element обычные переменные JavaScript включаются в качестве реактивных элементов.

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

Ссылка на статью:

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

https://vib-online.ru/book/intro

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

#Битрикс24 #Vue #фронтенд

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":7,"favorites":6,"reposts":0,"views":1057,"hits":2479,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2479,"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/960009-vib-interaktivnyi-uchebnik-po-vuejs","author":{"id":2709108,"name":"Александр Ширяев","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"515c6337-36d6-5176-bea3-01d0ae3c9c72","width":637,"height":637,"size":155308,"type":"png","color":"2c2325","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAcI/8QAJRAAAQMDAwMFAAAAAAAAAAAAAQIDBAUGEQAHCBIhQRMVMVJh/8QAFAEBAAAAAAAAAAAAAAAAAAAABf/EAB8RAAEEAQUBAAAAAAAAAAAAAAEAAgMRBAUSITFRYf/aAAwDAQACEQMRAD8AJyOvaTZdNqRuPbRM2nzISfb3U2vCRJYk9RCy86whAUjAJA6frknwXHmS542tsV3yU4yGHAG+Xm+uljaPzR3VpsdqnQE0wRoqEsshcXKvTSMJz3+cAaSr4hiQSr/yruK4HduNv6g5XaguU1OYcQ+qUsuJUCcKCs5B/dBaOSXuvxNaqAGCvUU2JZEkmRIs2huuunrccXTmVKWo9ySSnJJPnTRQS//Z"}},"cover":{"cover":{"type":"image","data":{"uuid":"513c9b1c-498a-596b-b120-6cefbdc0803a","width":1024,"height":1024,"size":494492,"type":"png","color":"cd9e7a","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAIF/8QAJBAAAgIABQMFAAAAAAAAAAAAAQIDBAAFBhEhBxIiCBMUQVH/xAAVAQEBAAAAAAAAAAAAAAAAAAAFBv/EACURAAECBAYCAwAAAAAAAAAAAAEAAgMREiEEBTFBUpEiI3Gx0f/aAAwDAQACEQMRAD8A2+prvp0G7nWko8xrSVu6syZTWWaOTtIdpHRVDJsCQCOCR94hYMaLi/ACnu/0r5sKDhva509tv0oxzdabsUrxU0u/HRisW9pR4A+PG3HG2HW5ZMCqU/hEPzRlRpBltcJP+pi3bjzLIWS1KpS9UZSHIKn25OR+YGy8kvvxSGJAEK3IqLmkdKTW55ptMZTJJJIzO7UoiWJPJJ7eThMRXgantHFjZ6L/2Q=="}},"cover_y":59},"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":2764641,"userId":2709108,"count":0,"shareImage":"https://api.vc.ru/achievements/share/2764641"}],"lastModificationDate":1764936082,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"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":3}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":893744,"customUri":null,"subsiteId":1272116,"title":"Фронтенд-разработка — как она помогает масштабировать бизнес?","date":1698396942,"dateModified":1698396942,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Способны ли разработчики увеличить доходность компании клиента? Еще как! В этой статье мы посмотрим на фронтенд-разработку с точки зрения пользы для бизнеса. Проследим основные этапы ее создания, а также расскажем, в каких коммерческих отраслях она наиболее необходима.

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"38173afc-8e59-5ea2-a44d-d8b8e72700c8","width":1920,"height":1200,"size":49059,"type":"png","color":"040407","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwYI/8QAIhAAAgIBAwQDAAAAAAAAAAAAAQIDBAYFESEAByJBCBKh/8QAFwEAAwEAAAAAAAAAAAAAAAAAAgMEBf/EACERAAEDAgcBAAAAAAAAAAAAAAEAAxECIQQSEzFRkfBS/9oADAMBAAIRAxEAPwDBvcD4+ZL2bXHL/cHQJZquQxQ3aRq30aO1WaIlisiKwXyKEbkN9WHj7Go3hW2XKC+CQY2MSI5jlJZez13Fve2RLbrbW5hWgkSISMI1c7sF34BPs7dROskVkUC02TzvZIVfO84vYtNUu5lrliCsVWCKXUZnSIBdgFBbZQBxx08Yp+IznsqfSb+R0pJ9c1tnZm1i8SSSSbD8/vQHEPG5rPZRadHAX//Z"}}}]}},{"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":"

Фронтенд-разработка — создание визуальной части сайтов или приложений, с которой напрямую взаимодействуют пользователи. Процесс включает в себя работу как над интерфейсом (UI), так и над пользовательским опытом (UX).

Противоположность фронтенда — бэкенд-разработка или работа над внутренним наполнением сайта, его скрытой структурой, бизнес-логикой продукта.

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

Безвозвратно минула середина 1990-х, когда фронтенд только начинал формироваться как самостоятельная область разработки, а сами сайты были очень простыми. За последние 20 с лишним лет веб-технологии прошли существенный путь развития, и современные требования к сайтам как со стороны пользователей, так и со стороны бизнеса теперь иные. Но задача фронтенд-разработчика была и есть одна — создать максимально удобный, интуитивно понятный и функциональный 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":"

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

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

2. Дизайн. На этапе UI/UX дизайнеры на основе составленных ранее пользовательских сценариев создают макеты/прототипы сайта/приложения.

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

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

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["создание статического сайта (SSG): сайт состоит из множества заранее созданных HTML-файлов;","рендеринг на стороне сервера (SSR): в этом случае сервер генерирует HTML-код для каждой страницы динамически при обращении пользователя к конкретной странице;
","одностраничные приложения (SPA): приложение представляет из себя одну страницу, содержимое которой динамически обновляется, реагируя на воздействия со стороны пользователя;
","прогрессивные веб-приложения (PWA): этот вид приложений позволяет добиться поведения, схожего с мобильными приложениями. Базой для них является также стандартный набор веб-технологий: HTML, CSS, JavaScript;
","гибридные веб-приложения: такие приложения создаются сочетанием рендеринга как на стороне клиента, так и на стороне сервера;
","микрофронтенд: данная архитектура подразумевает разбиение сайта или приложения на небольшие самодостаточные компоненты, которые можно разрабатывать и разворачивать независимо.
"],"type":"UL"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

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

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

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

4. Тестирование. QA-стадия включает в себя проверку разработанного функционала и интерфейса продукта на соответствие заявленным требованиям.

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

5. Развертывание. Далее проект разворачивается на веб-сервер для обеспечения доступа к нему пользователей.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"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":"

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

"}},{"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":"

2. Применение поисковой оптимизации (SEO) позволяет сайтам компаний занимать более высокие позиции в результатах выдачи поисковых систем. Это, как следствие, может способствовать увеличению посещаемости ресурса и продаж.

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

3. Реализация передовых техник, повышающих доступность сайта (например, руководство WCAG W3C), привлечет дополнительных пользователей с ограниченными возможностями. Для некоторых областей бизнеса это является обязательным требованием.

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

4. Хорошо спроектированный IT-продукт с точки зрения UI/UX-дизайна способен произвести на пользователей положительное впечатление, повысить привлекательность бренда и сделать его более узнаваемым на фоне конкурентов. А также легко интегрировать маркетинговые элементы и инструменты аналитики.

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

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

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

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

"}},{"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":["e-commerce (маркетплейсы, ритейлеры, интернет-магазины);","

информационные ресурсы (в том числе блоги);

","финансовый сектор (банки);","образование;
","медицина;
","реклама;
","туризм и т.д.
"],"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":"

Фронтенд-разработка, как и другие IT-решения, всегда обсуждается заранее. Это важнейший элемент при создании цифрового продукта. Чем больше деталей и болей будет выявлено и учтено на ранних этапах, тем быстрее получится обрести задуманное и привлечь новых клиентов к своему бизнесу. Идеи для создания продающего сайта или помощь в его реализации можно найти на странице Fusion Tech.

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

Новости из мира IT-технологий, о трендах индустрии, бизнес-сервисах и не только — в ТГ-канале или на сайте Fusion Tech.

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

Читайте также:

"}},{"type":"osnovaEmbed","cover":false,"hidden":false,"anchor":"","data":{"osnovaEmbed":{"type":"osnovaEmbed","data":{"original_id":769456,"isNotAvailable":false,"title":"Как выбрать CRM-систему и сэкономить бюджет компании","description":"Без чего никак не обойтись в современной компании, так это без CRM-системы. Рынок предлагает множество вариантов, функционал которых год от года становится все более разнообразным. Какую систему выбрать, чтобы она отвечала всем требованиям компании и не была накладной для бюджета? Мы тоже задавались этими вопросами долгое время. Какое нашли решение — расскажем в этой статье.","isEditorial":false,"image":{"type":"image","data":{"uuid":"07e70c3b-34ba-54b5-a886-20014021b5fc","width":1920,"height":1200,"size":56434,"type":"png","color":"040404","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAUG/8QAIRAAAgEDBQEBAQAAAAAAAAAAAQIDBAURAAYIEhMhUTH/xAAYAQADAQEAAAAAAAAAAAAAAAACBAUAAf/EAB8RAQACAgICAwAAAAAAAAAAAAEAAgMRITEEQRIUwf/aAAwDAQACEQMRAD8AOFt4u8fp9oruXeO/azaNyuS1MlPbpLnTV8dOgWbykEkI6yr6QlcK5Y569ckHVHJ41TGZgT5dCcG11z76nGttD1+zQWvhNxoS2Ui7g5K08N0EEYro4Vi80qOo9FXswbqGyBkA4/oB0dvCrjWlk2cRP7tfQwaUTNNYqhpWLtC3WIsclBjOF/Pv5qY2XhY9tZINTUsSzVEhJOSS5+622Don/9k="}},"url":"https://vc.ru/services/769456-kak-vybrat-crm-sistemu-i-sekonomit-byudzhet-kompanii","blocks":[{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"07e70c3b-34ba-54b5-a886-20014021b5fc","width":1920,"height":1200,"size":56434,"type":"png","color":"040404","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAUG/8QAIRAAAgEDBQEBAQAAAAAAAAAAAQIDBAURAAYIEhMhUTH/xAAYAQADAQEAAAAAAAAAAAAAAAACBAUAAf/EAB8RAQACAgICAwAAAAAAAAAAAAEAAgMRITEEQRIUwf/aAAwDAQACEQMRAD8AOFt4u8fp9oruXeO/azaNyuS1MlPbpLnTV8dOgWbykEkI6yr6QlcK5Y569ckHVHJ41TGZgT5dCcG11z76nGttD1+zQWvhNxoS2Ui7g5K08N0EEYro4Vi80qOo9FXswbqGyBkA4/oB0dvCrjWlk2cRP7tfQwaUTNNYqhpWLtC3WIsclBjOF/Pv5qY2XhY9tZINTUsSzVEhJOSS5+622Don/9k="}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

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

"}}],"date":1690191689,"author":{"id":1272116,"name":"Fusion Tech","avatar":{"type":"image","data":{"uuid":"37086fce-6f04-5c26-8937-8c5a4a550cfa","width":500,"height":500,"size":2598,"type":"png","color":"040404","hash":"","external_service":[]}}},"subsite":{"id":200396,"name":"Сервисы","avatar":{"type":"image","data":{"uuid":"158fab2d-76c1-5ed8-898a-76ee48d4c795","width":1200,"height":1200,"size":99571,"type":"png","color":"7cdaea","hash":"08183848d81000","external_service":[]}}},"likes":0,"comments":3,"isBlur":false,"warningFromEditor":null,"warningFromEditorTitle":null}}}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#айти #it #веб #разработка #fusiontech #фьюжн #digital #технологии #приложение #сайт #b2b #фронтенд #бэкенд #frontend #backend

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":8,"reposts":3,"views":318,"hits":263,"reads":null,"online":0},"dateFavorite":0,"hitsCount":263,"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/893744-frontend-razrabotka-kak-ona-pomogaet-masshtabirovat-biznes","author":{"id":1272116,"name":"Fusion Tech","nickname":null,"description":"Об опыте развития IT-компании, бизнес-процессах, кейсах и решениях. Веб/мобильная разработка, дизайн, аутстаффинг, аудит проектов: https://fusion-tech.ru/","uri":"","avatar":{"type":"image","data":{"uuid":"37086fce-6f04-5c26-8937-8c5a4a550cfa","width":500,"height":500,"size":2598,"type":"png","color":"040404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"feff2fed-aa3e-54ca-8826-37887754012f","width":1920,"height":560,"size":73289,"type":"png","color":"040404","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 16 августа 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":5551845,"userId":1272116,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5551845"},{"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":4176131,"userId":1272116,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4176131"}],"lastModificationDate":1764936082,"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":true,"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":7}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":697762,"customUri":null,"subsiteId":105246,"title":"Сколько зарабатывают frontend разработчики. Перспективы работы в России и в мире в 2023 году","date":1684336709,"dateModified":1684336709,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Друзья, привет!
При построении карьеры в сфере веб-разработки, у вас, несомненно, может возникнуть много вопросов. Какие языки программирования следует изучать? Как выглядит рынок труда сегодня? На какую зарплату вы можете рассчитывать, получив заветную должность?

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

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

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"76c4e728-d30f-5826-a04b-01ef5bd70bf2","width":1280,"height":853,"size":187070,"type":"jpg","color":"313536","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

О том, чем занимаются frontend-разработчики, насколько востребована эта профессия и где сегодня можно получить новые знания расскажет Василий Муравьев, основатель учебной платформы Stackdev и разработчик с 9-летним стажем.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Чем занимаются фронтенд разработчики"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

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

Интерфейсы многих современных сайтов включают большое количество сложной бизнес логики. Именно поэтому сайты на чистом JavaScript стали редкостью. Сегодня при разработке сайтов и веб приложений часто используются различные JavaScript библиотеки и фреймворки, такие как React, Vue или Angular.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Востребованность фронтенд разработчиков"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сегодня JavaScript является одним из самых востребованных языков программирования. Например, поиск известной соцсети LinkedIn выдает около 20 000 вакансий фронтенд разработчиков в США. К числу навыков и компетенций, на которые компании обращают внимание, относятся:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Опыт использования HTML, CSS и JavaScript для создания динамических веб-сайтов и приложений.","Знание JavaScript библиотек и фреймворков (React, Angular или Vue).","Уверенное знание нативного JavaScript, включая редакции ES5 и ES6.","Владение инструментами для управления состоянием данных (Redux и др.)."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В своем отчете “IT Skills Report 2022” рекрутинговая платформа DevSkiller представила интересные данные о текущих тенденциях найма разработчиков. На основе анализа более 200 000 тестов по программированию в 143 странах они обнаружили, что 34,8% компаний, проводящих собеседования на младшие должности, искали именно разработчиков JavaScript.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"b3bfec43-cb33-5811-87d3-833ab2ad688b","width":1000,"height":667,"size":176035,"type":"jpg","color":"b465b4","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Зарплаты в России"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В 2023 году средний рост зарплат всех IT специалистов в Москве, куда входят разработчики, составляет около 16,5%. IT сфера несомненно остается одной из самых привлекательной для соискателей, несмотря на происходящие трансформации в экономике.

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

Общее количество опубликованных вакансий frontend разработчиков на hh.ru в начале года составило более 3-х тысяч.

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

За последние пару лет конкуренция среди младших фронтенд разработчиков усилилась, но даже junior-специалисты в столице могут получать порядка 100 тыс. руб. без учета дополнительных льгот и компенсаций. А вот разработчик с квалификацией middle-senior может рассчитывать на диапазон заработной платы от 200 до 700 тыс. руб.

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

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Зарплаты в мире"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В ходе исследования 2022 года “State of JS” более 28 000 разработчиков JavaScript поделились уровнем своего дохода. Большинство (28,3%) сообщили о зарплате в пределах 50-100 тыс. долл. в год, а 18,8% зарабатывают порядка 100-200 тыс. долл. в год. Только 17,1% участников исследования сообщили о заработке, эквивалентном 30-50 тыс. долларов в год.

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

А в Англии, например, по данным платформы для найма разработчиков CodinGame, каждые 2 минуты появляется новая вакансия, где требуется знание JavaScript. При этом более чем в половине из них предлагается зарплата не менее 50 000 фунтов стерлингов ($60 900), а каждый пятый работодатель (20%) обещает 70 000 фунтов стерлингов ($85 300) и выше. Да и в целом более 33% всех объявлений о технических вакансиях требуют владения языком JavaScript.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Средние зарплаты разработчиков JavaScript в разных странах мира в 2023 году:"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Австралия — $137 654 в год.","Канада — $90 237 в год.","Германия — €64 411 в год.","Индия — ₹6,14,982 в год.","Южная Африка — 111 730 рандов в год.","Великобритания — 62 826 фунтов стерлингов в год.","США — $103 590 в год."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Еще один фактор, который влияет на уровень оклада, это размер компании. Данные сервиса PayScale показывают как компенсация труда JS разработчиков соотносится с размером компании:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["1-9 сотрудников в компании — $73 202 в год.","10-49 сотрудников в компании — $72 081 в год.","50-199 сотрудников в компании — $78 114 в год.","200-599 сотрудников в компании — $81 377 в год.","600-1,999 сотрудников в компании — $84 838 в год.","2 000-4 999 сотрудников в компании — $84 738 в год.","5 000-19 999 сотрудников в компании — $89 866 в год.","20 000-49 999 сотрудников в компании — $88 860 в год.","50 000+ сотрудников в компании — $88 650 в год."],"type":"UL"}},{"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":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

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

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

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

#программирование #разработка #зарплаты #карьера #вебразработка #javascript #фронтенд #фронтендразработка #разработчики #stackdev

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":35,"favorites":17,"reposts":0,"views":6297,"hits":15333,"reads":null,"online":0},"dateFavorite":0,"hitsCount":15333,"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/697762-skolko-zarabatyvayut-frontend-razrabotchiki-perspektivy-raboty-v-rossii-i-v-mire-v-2023-godu","author":{"id":105246,"name":"Trepolsky Dmitry","nickname":null,"description":"Эксперт по PR, маркетинговым и бизнес коммуникациям, Digital PR, онлайн рекламе, развитию бизнеса, директор онлайн-агентства Pronline, писатель, фотограф.","uri":"","avatar":{"type":"image","data":{"uuid":"7ee7fe1f-9a6a-4022-b358-6f9e3aca3c93","width":3024,"height":4032,"size":6496968,"type":"jpg","color":"181c14","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"4acbceec-6e13-55da-a5f7-0b8d8ba7e82d","width":2490,"height":1667,"size":889069,"type":"jpg","color":"312d2a","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAKAAoDASEAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQb/xAAkEAACAQMDAwUAAAAAAAAAAAABAgMEBREABiESFDEyM0JDUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAHBEAAgEFAQAAAAAAAAAAAAAAAQIAAwQRITGh/9oADAMBAAIRAxEAPwCCo9zWamtscVXZFidSI891IrsecAdPOgqmq2atTKstvuSSByGXvs4OTkenRNcu3BFS2RBsnyFwezQ1H3CXIk+QPV++dKrHGwDMisx5JI5J1PrnDalKgAyZM//Z"}},"cover_y":67},"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":5316385,"userId":105246,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5316385"},{"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":1692298,"userId":105246,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1692298"},{"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":465590,"userId":105246,"count":0,"shareImage":"https://api.vc.ru/achievements/share/465590"}],"lastModificationDate":1764936082,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":"1ef7a6bd-1a70-6e00-9665-4b697c5cb924","isDonationsEnabled":true,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":true,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":"plus","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":59}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};