Кто они – волшебники Frontend’а?

16 октября 2023

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

Чем же мы занимаемся

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

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

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

Также немало времени уделяется так называемому «неймингу» CSS-классов, с помощью которых задаются внешние характеристики объектам веб-страницы. По названию классов должно быть понятно, какой элемент страницы под ним скрывается или какого рода стили по нему задаются. Здесь нужно быть аккуратным и стараться максимально все продумать. Например, часто можно встретить такую ситуацию: кнопка, которой изначально задавался класс «btn-green», то есть зеленого цвета, может стать красной или синей. Тогда смысловая нагрузка в названии класса не просто теряется, а мешает работать.

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

Ольга Владимирова, HTML-верстальщица

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

И нельзя напоследок обойтись без шуточек об известном «противостоянии» Frontend vs Backend. Фронтенд – это то, что видит пользователь, открыв сайт и начав с ним взаимодействовать. Работа бэкенда более скрыта от простого пользователя. Отсюда рождаются веселые мемы.

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

Понравилась статья?
11
0

Читайте где
удобно

А ещё наши публикации можно читать, не отрываясь от работы

Всего-то нужно подписать свой рабочий почтовый ящик на рассылку.
строго без спама
Сертифицированное
агентство
Яндекс.Директ
ТОП 50 агентств Москвы по созданию и продвижению сайтов
Сертифицированный
партнер
myTarget
Член агентского клуба Ruward