Главное Свежее Вакансии Образование
😼
Выбор
редакции
843 3 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как фронтенд-разработчику стать полезнее

Советы фронтенд-разработчика, который делает свой продукт.

b_5cbef03d91bda.jpg

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

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

  1. Не презирайте верстку. Обычно, если в вакансии написано, что не нужно верстать, то это рассматривается как большой плюс. Верстать не суперсложно, но многие фронтендщики не умеют это делать. Если вы еще не используете display: flex - самое время начать. И конечно же стоит знать хотя бы приблизительно о методологиях типа BEM. Это поможет разобраться в верстке спустя неделю
  2. SEO - это бесплатная реклама. Когда вы начнете относить свои деньги за рекламу в Facebook, Vk и Яндекс, то захотите узнать как еще продвигать сайт. Попробуйте заняться SEO. А вдруг сработает? Для начала я бы почитал вот эту статью. Если все получится, то SEO сэкономит немало денег в будущем.
  3. Google давно выдает не просто список сайтов, а еще много развернутых карточек с информацией о компаниях, новостях, ответы на вопросы. Чтобы Google подобным образом использовал и ваш сайт, надо этим заняться. Здесь нет никакой магии, изучайте schema.org
  4. Если однажды решите сделать продукт, то продвигать вы его будете всеми возможными способами. Например, спамить друзей в социальных сетях. Чтобы сайт красиво отображался в переписке или посте, об этом нужно позаботиться - сделать картинки и прописать специальные мета теги. Достаточно сделать это для Facebook. Другие социальные сети либо используют ту же разметку, что и Facebook, либо имеют какие-то свои мета теги.
  5. Технологию AMP для ускоренной загрузки мобильных версий страниц давно уже продвигает Google. По крайней мере знайте эту технологию и умейте применять.
  6. Все, что связано со скоростью работы сайта, должно интересовать фронтендщика. Например, такая технология как http 2.0. Использование http 2.0 напрямую влияет на скорость загрузки сайта. Проверьте ваш сайт, возможно он по-прежнему тянет данные по http 1.1. Проверить это можно в консоли разработчика Google Chrome -> вкладка Network. Если в колонке Protocol у вас написано h2, то все хорошо. Вы молодцы. А если http/1.1, то нет.b_5cbef0dc42340.jpg
  7. Картинки бывают не только jpg, svg и png, а, например, еще и webp. Этот формат сделал Google все с той же целью оптимизации. Сейчас его поддерживает только Google Chrome, но это уже довольно большая аудитория. На всякий случай еще напомню, что для мобильной и десктопной версии нужно загружать разные картинки, а также и для ретина и не ретина дисплеев.

Многое из того, что здесь написано, реализовано на нашем сайте furnas.ru. Заходите, критикуйте =)

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

+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Сергей Рябов
про амп хороший совет, заметил за собой что чаще перехожу на амп и турбо странички на мобильнике
Ответить
Константин Макрутин
наконец-то стоящий материал в выборе редакции
Ответить
Мария Фокина
Почти как чек-лист к проекту ))) было бы круто создать для себя такой чек-лист, типа что нужно не забыть сделать при создании сайта. И разработчику удобно следить за всеми задачами и заказчику удобно контролировать разработчика, все ли работы были сделаны
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.