Что должен знать фронтенд разработчик: Что должен уметь фронтенд-разработчик / Блог компании Нетология / Хабр

Что должен знать Junior Front-end разработчик в 2020 🖥️

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

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

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

По этому специалисты из dan-it.com.ua составили подробный гайд скилов, которые в действительности соответствуют позиции junior front-end developer.

Почему требования к начинающему веб-разработчику завышены?

Сегодня front-end разработка — вторая после QA возможность войти в айти. Соответственно, количество верстальщиков-самоучек и только окончивших курсы фронтенд-разработки растет с каждым днем. Несмотря на то, что эта позиция достаточно востребована на рынке труда, такое большое количество желающих начать свой путь в IT заставляет работодателей ужесточать отбор потенциальных кандидатов, тем самым намеренно повышая требования на позицию чуть ли ни до уровня middle-разработчика.

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

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

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

 С чего начать изучение фронтенда

Прежде чем начать изучение веб-разработки, нужно понимать, что верстальщик и фронт-енд разработчик — это не одно и тоже, но эти понятия часто путаются самими работодателями. Верстальщик конвертирует графический макет дизайна в  HTML+CSS разметку, может добавить простые плагины и анимацию. Front-end разработчик же превращает это в более сложный и динамический интерфейс.

Процесс веб-разработки включает в себя верстку страниц, но не ограничивается этим.

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

Все необходимые знания и навыки можно разделить на hard skills, то есть технические, и soft skills — личные качества:

Хард скилы

Техническая база обязательных основ, которую вам следует освоить выглядит следующим образом:

• HTML(HTML5). Понимание языка разметки — это самый первый маст хэв в вашей копилке навыков. Вы должны понимать анатомию HTML-разметки веб-страницы и освоить базовые теги, их атрибуты и вложенные элементы. Также нужно знать как они должны правильно выглядеть.

• CSS (CSS3). Следует научиться стилизовать элементы, при чем делать это правильно, не оставляя огромных полотен неиспользуемых стилей. Для начала вам нужно освоить:
  • блочная модель и позиционирование содержимого (float),
  • компоновка и выравнивание элементов на странице (flexbox),
  • очистка потока и его методы,
  • выравнивание и центрирование элементов,
  • видимостьэлементов (display, visibility, overflow),
  • панель инструментов xbox,
  • специфичность селекторов и как она работает,
  • базовые знания CSS grid layout
  • responsive design (верстка под мобильные устройства),
  • подходы mobile-first/desktop-first на уровне понимания,
  • кроссбраузерность верстки.

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

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

• JavaScript. На данном этапе многие начинающие веб-разработчики допускают большую ошибку, пренебрегая основами JavaScript и перепрыгивая сразу на фреймворки. Знать основы важно, и изучить вам необходимо следующее:
  • базовое понимание языка и его особенности,
  • структуры данных,
  • строки, числа, объекты и массивы (нужно знать методы, чтобы добавить значение в массив, перевернуть слово задом наперед),
  • замыкание и области видимости (как работает и что значит),
  • методы объекта (Bind, Call и Apply),
  • контекст выполнения и стек вызовов функций (следует хорошо понимать разницу и уметь применять на примерах)
• Понимать как работает система контроля версий GIT. Работая в команде вы должны уметь контролировать свой код, для этого знание 3-5 команд будет достаточно.

Фактически, это все, что должен знать junior frontend разработчик на начальном этапе. Важно также не просто ознакомиться с информацией, а сразу же применять все знания на практике. Чем больше практики, тем быстрее получите результат.

Софт скилы

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

• Self-management — самый главный скилл, ведь вам необходимо будет стать самому себе начальником. Позиция джуниор фронтенд разработчика подразумевает постоянное самообучение, при чем вы должны будете научиться самостоятельно находить ответы на все вопросы. В толковой компании у вас будет наставник, который поможет разобраться в сложных вопросах, но в среде программирования спрашивать одно и то же несколько раз считается едва ли не моветоном.

Научитесь сразу запоминать информацию, или хотя бы записывать.

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

• Работа в команде. Сюда же можно отнести коммуникацию и общение. Умение слушать людей и прислушиваться к чужому мнению поможет вам продвинуться на пути разработчика. Более опытные коллеги дадут необходимую информацию быстрее и компактнее, нежели если бы вы учили ее самостоятельно. При этом также важно уметь формировать свое мнение и отстаивать его.
• Английский язык. Для веб-разработчика очень важно умение говорить (даже если нет идеального знаний правил грамматики) и читать документацию на английском языке.

Дополнительные, но не обязательные навыки

Эту информацию зубрить не обязательно, и вряд ли на собеседовании от вас будут требовать суровую практику, но наличие этих знаний на базовом уровне будет однозначно плюсом:

• Основы JS DOM (Document Object Model):
  • знать о документе и объектах страниц (научитесь передвигаться по DOM-дереву элементов, находить их разными способами)
  • понимать основы работы с событиями (вешать элементарные обработчики, знать про модель распространения событий, уметь их перехватить, обработать и отменить).
• Базовые понятия синтаксиса ES6 (fetch, async/await, promise).
• CSS препроцессор (SASS/LESS) — вложенности и создание переменных.
• CSS фреймворк (Bootstrap/Foundation) — достаточно понимать архитектуру и как она используется.
• JS фреймворк (React/Angular/Vue) и JQuery — основы.

Вопросы на собеседовании junior фронтенд разработчика

Техническое собеседование на позицию джуниор фронтенд разработчика в 99% случаев начинается с вопросов об HTML. А самый распространенный вопрос их тех, что нужно знать front end разработчику: что такое Doctype и зачем он нужен.

Далее вас спросят о семантике HTML. Здесь не нужно зубрить информацию по каждому тегу и его атрибутам, но вы должны понимать общую структуру их построения, и уметь объяснить разницу между тегами для заголовков, секций, навигации. Также, нужно понимать как правильно их оформлять.

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

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

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

Покажите на собеседовании, что вы горите фронтендом, что вы постоянно учитесь и хотите расти. Технологии в айти развиваются со стремительной скоростью и вы должны быть готовы не только постоянно учить новое, но и следить за обновлением уже существующих знаний. Здесь очень важно научиться фильтровать информацию и не распыляться на множество статей «обо всем и ни о чем». Самостоятельное обучение может занять больше года, в то время как оптимизированные курсы помогут освоить направление фронтенд за 5-7 месяцев. Записаться на полный курс Frontend с нуля можно тут.

Ознакомиться с программой поступления на курс по фронтенду также можно на сайте https://dan-it.com.ua/program/kiev/front-end/.

Практическое руководство как стать Senior Frontend Developer / Хабр

Привет, Хабр! Представляю вашему вниманию перевод статьи «A Practical Guide To Become a Senior Frontend Developer» автора Seifeldin Mahjoub.

Карантин может стать твоим звездным часом

Есть несколько определений для звания ‘Senior’, и меняются они от компании к компании. И, понятное дело, требуются много навыков, как hard skills, так и soft skills. Крис Коер написал статью о характерных чертах и склонностях в поведении, которые должны быть у сеньёра фронтенд разработчика, что даёт хорошую картинку в целом.

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

1. Овладеть основами

Сеньёру должно быть очень комфортно иметь дело с HTML, JS и CSS. К тому же, они должны владеть базовыми концепциями того, как работает интернет, включая браузеры, сети и сервера.

Это значит, что такие концепции, как прототипы, всплытие событий, call stack, promise, es6 для вас не пустой звук. То же касается CSS, анимаций, grid-систем, соглашений об наименованиях, и спецификациях.

Необходимо знать многочисленные концепции, ниже вы сможете найти некоторые ресурсы, по которым вы сможете пробежаться и восполнить знания, которых вам не хватает, по крайней мере пока что. CSS Reference, Html Reference, Javascript Fundamentals, Frontend Handbook.

2. Начинайте с чтения документации.

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

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

Убедитесь, что вы прочли документацию ЦЕЛИКОМ, как ваш путеводитель к пониманию всех деталей фреймворка.

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

3. Понимание процесса сборки

Большинство фреймворков предоставляют процесс сборки из коробки с помощью CLI, в роде angular-cli или create-react-app.

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

Начните с понимания важных концептов, таких как транспиляция, сборка, минификация и упаковка. Позже вы сможете двигаться к ‘nice-to-have’ фичам, например, линтерам, горячей перезагрузке и git хукам.

Как только почувствуете уверенность в своих знаниях, соберите все части пазлов вместе, выбрав один из популярных сборщиков (webpack/parcel), и приступайте к созданию вашего первого приложения с нуля.

4. Прочтите руководство написания кода (style guide)

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

Style guide содержит большое количество полезных практик (Best practices), которые помогут вам понять фреймворк ещё лучше и иметь со своей командой единый стиль написания кода.

Вы также можете обеспечить соблюдение правил, используя линтеры, например, vue-eslint-plugin.

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

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

Освоение dev tools значительно улучшит вашу продуктивность в сравнении с обыкновенным использование console.log или debugger.

6. Поймите реактивность

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

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

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

Есть отличный курс от Эвана Ю (создатель Vue), где он объясняет, как устроена реактивность Vuejs, начиная с самых основ.

7. Выделите для себя паттерны компонентов

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

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

Взгляните на эти две статьи Advance Vuejs Component Patterns и
Advanced React Component Patterns чтобы узнать больше.

8. Пишите компонуемый код

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

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

Почти все сообщества имеют установленный набор шаблонов написания кода, например react-hooks, или, в мире Vue, Vue-composition API и Mixins.

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

9. Оптимизируйте коммуникацию компонентов

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

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

На помощь приходят такие стратегии, как flux pattern, event emissions или callbacks и props.

Ознакомьтесь с семью паттернами коммуникации Vue-компонентов.

10. Покрывайте свой код авто-тестами

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

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

Исследуйте unit тесты, snapshot тесты и e2e тесты.

Статья о необходимости прагматического тестирования фронтеда.

11. Выходите из своей зоны комфорта

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

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

Также, вы сможете почерпнуть некоторые концепции и ваша способность переключаться между фреймворками станет для вас реактивной силой. Так что отправляйтесь изучать, будь то React, Angular, Vue или Stencil, их целая куча. Я уверен, что вы отыщете себе фреймворк по душе.

12. Двигайтесь дальше

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

Отправляйтесь изучать такие разделы, как серверный рендеринг, Jamstack, accessibility, мобильные приложения, десктоп приложения, service workers, алгоритмы, функциональное программирование.

13. И не забывайте развлекаться

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

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

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

P.S. от переводчика:

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

Спасибо за внимание!

Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания

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

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

Пользовательский интерфейс

▍Макет страницы

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

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

В настоящий момент вышел альфа-релиз 5 версии Bootstrap.

Если вы предпочитаете создавать наборы стилей для своих проектов самостоятельно (компоненты, отступы, контейнеры и так далее), можете обратить внимание на CSS Flexbox, сделав этот способ гибкого размещения элементов веб-страниц основой вашего собственного CSS-фреймворка.

CSS Grid использует другой подход к организации материалов веб-страниц, размещая их в сетке.

▍Отзывчивый дизайн

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

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

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

CSS-медиазапросы — это мощное средство поддержки отзывчивого дизайна.

Их можно использовать вместе с уже упомянутыми CSS Flexbox или CSS Grid. Если вы предпочитаете пользоваться CSS-фреймворками, то эти фреймворки обычно уже реализуют соответствующие возможности. При таком подходе для создания отзывчивых страниц достаточно добавить к элементам соответствующие классы.

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

▍Однородные компоненты и элементы управления

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

Если вы хотите использовать для разработки своих проектов существующие фреймворки и библиотеки, Angular, React или Vue, то вот несколько примеров библиотек стилей, реализующих принципы Material Design, рассчитанных на эти инструменты:

• Angular. Библиотека Angular Material, в которой можно найти мощные компоненты и полный CDK.
• React. Принципы Material Design реализованы в веб-компонентах библиотеки Material UI.
• Vue. Здесь к нашим услугам Vuetify — реализация Material Design, предназначенная для Vue-проектов.

▍Проверка форм и обработка ошибок

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

• Angular. Так как Angular — это полноценный фреймворк, он даёт в наше распоряжение специальный API, направленный на валидацию форм.
• React. Вероятно, в React-проектах для проверки форм чаще всего используется библиотека React Hook Form.
• Vue. Название соответствующей библиотеки для Vue, vuelidate, построено на интересной игре слов.

Пользовательский опыт

▍Использование асинхронных механизмов

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

В решении этих задач нам помогут JavaScript-механизмы, вроде промисов, и браузерные API наподобие Fetch.

▍Поддержка устаревших браузеров (полифиллы)

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

Для обеспечения правильной работы проекта в старых браузерах применяются полифиллы. Они достаточно хорошо описаны в этом материале: «Полифилл (polyfill, polyfiller) — это фрагмент кода (или подключаемый модуль), который предоставляет реализацию технологии, которую вы, разработчик, ожидаете найти в числе стандартных возможностей браузера».

Для того чтобы узнать, поддерживается ли некое CSS-правило, или некая JS-функция в конкретной версии браузера, загляните на сайт Can I Use.

Если говорить о решении вопросов браузерной поддержки в Angular, React и Vue, то дело обстоит так:

• Angular. В документации к Angular есть особый раздел, посвящённый браузерной поддержке.
• React. Проекты, создаваемые с помощью Create React App, поддерживают, как и ReactDOM, браузеры, начиная с IE 9. Эта поддержка основана на использовании полифиллов.
• Vue. Здесь особенности поддержки устаревших браузеров описаны в документации к CLI.

▍Локализация и интернационализация

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

Локализация (l10n, localization) — это, по определению W3C, адаптация содержания продукта, программы или документа к языковым соответствиям, культурным и другим требованиям определённого целевого рынка.

Интернационализация (i18n, internationalization) — это, если опираться на материалы W3C, создание и развитие содержания продукта, программы или документации, позволяющее производить лёгкую локализацию для целевых рынков, различающихся по культуре, региону или языку.

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

• Использование на сайте выпадающего списка с перечнем языков, поддерживаемых проектом.
• Доступ к сведениям о географическом местоположении пользователя (с помощью браузерного API Geolocation) и адаптация веб-сайта в соответствии с полученными данными.
• Указание сведений о языке в URL. Например, это может выглядеть так: example.com?lang=en, или так: example.com/en, или даже так: en.example.com.

Теперь — об этих концепциях в Angular, React и Vue.

• Angular. Angular, повторюсь, это полноценный фреймворк, он даёт разработчику готовое решение.
• React. Задачи интернационализации проектов можно решать с помощью популярной в React-среде библиотеки react-i18next.
• Vue. В решении рассматриваемых нами задач очень хорошо показывает себя библиотека vue-i18n.

▍Доступность контента

Доступность (a11y, accessibility), это возможность сайта адаптироваться к нуждам пользователей с ограниченными возможностями.

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

В деле обеспечения доступности веб-проектов применимы различные технические приёмы. В их число входит следующее:

• Использование атрибута изображений alt.
• Применение ARIA-атрибутов для оформления описаний содержимого страниц сайта.
• Поддержка возможности изменения размеров текста.
• Наличие высококонтрастного режима.
• Поддержка навигации по сайту с использованием клавиатуры, в частности, клавиши TAB и клавиш-стрелок.

В рамках проекта a11yproject.com проводится в жизнь идея стандартизации этих концепций. Эта инициатива достойна уважения! Основные JS-фреймворки и библиотеки тоже прилагают усилия к поддержке разработки доступных сайтов:

• Angular. В документации к этому фреймворку есть особый раздел. Разработка доступных проектов поддерживается и на уровне Angular CDK.
• React. Речь о доступности ведётся и в документации к библиотеке React. Существует и специальная библиотека — react-a11y. Но эта библиотека больше не поддерживается, поэтому пользуйтесь ей с осторожностью и учитывайте то, что её планируется заменить на библиотеку react-axe.
• Vue. Разрабатывать доступные проекты на Vue поможет плагин vue-a11y. При создании библиотеки vuetify тоже учтены соображения доступности.

▍Уведомления

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

Загрузка и обработка данных

▍Единый источник достоверных данных

Средства для управления состоянием приложения, которые обрели популярность в 2015 году, в наши дни являются обязательным компонентом практически любого веб-проекта. Хотя в сфере управления состоянием приложений не всё однозначно, использование специализированных решений обычно является простым и эффективным методом централизованной обработки данных приложения. Все средства для управления состоянием основаны на паттерне Flux.
NgRx-реализация паттерна Flux (источник — ngrx.io)

В этих средствах используются разные названия для одних и тех же сущностей. Например, то, что в NgRx называется selectors, в Vuex называется getters. То, что в Angular получило имя reducers, в Vue называется mutations.

Вот средства для управления состоянием приложений, используемые в Angular, React и Vue:

• Angular. «Реактивная система управления состоянием для Angular»: NgRx.
• React. Тут, конечно, применяется Redux.
• Vue. Для управления состоянием Vue-приложений используется Vuex.

▍Загрузка данных

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

• Angular. В документации к Angular рекомендуется использовать rxjs и подход, основанный на паттерне Observer (тут применяются наблюдаемые объекты или объекты класса Subject).
• React. Документация React рекомендует для загрузки данных использовать API Fetch.
• Vue. Сообщество Vue предпочитает использовать библиотеку Axios. Эта реализация механизма загрузки данных основана на промисах.

В разговоре о механизмах загрузки данных в веб-приложения стоит упомянуть о GraphQL. Эта технология изменила подход, используемый при загрузке данных во фронтенд-приложениях. При её применении «Клиент определяет то, что ему нужно, используя язык запросов». Используя GraphQL мы можем получать из удалённых источников данных в точности то, что нам нужно, и ничего лишнего.

Вот реализации GraphQL для интересующих нас фронтенд-инструментов:

▍Локальное хранение данных

Локальное хранение данных — это хранение данных на компьютере пользователя. Данные можно хранить с использованием куки-файлов, а так же с применением механизмов localStorage и sessionStorage.

▍Веб-воркеры

Веб-воркеры — это технология, представленная новым браузерным API. Она даёт возможность фонового выполнения JavaScript-кода, снимая нагрузку с главного потока и не влияя на производительность кода веб-страницы.

Веб-воркеры применимы в Angular, React и Vue:

• Angular. В документации к Angular есть особый раздел, посвящённый этому вопросу.
• React. Существует особый React-хук, сведения о котором можно найти здесь.
• Vue. Во Vue-приложениях веб-воркерами удобно пользоваться с применением библиотеки vue-worker.

Сеть и производительность

▍Размер бандла приложения

Рост рынка смартфонов стал причиной революции в мире веб-разработки. Теперь при создании веб-сайтов нам нужно, в первую очередь, учитывать нужды мобильных пользователей. Чем меньший объём данных придётся загружать мобильным устройствам при работе с веб-проектами — тем лучше. В соответствии с графиком, показанным ниже, мобильное использование интернета обогнало настольное ещё в 2016 году.
Использование интернета в мире (источник — broadbandsearch.net)

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

• Angular. Бандлы Angular-приложений легко и удобно исследовать с помощью webpack-bundle-analyzer. Более того, CLI Angular даёт в наше распоряжение опцию stats-json, которая позволяет сформировать отчёт после сборки бандла.
• React. В документации к Create React App есть страница, посвящённая анализу размеров бандлов.
• Vue. Во Vue, как и в Angular, есть опция report, которая позволяет формировать отчёты по бандлам.

▍Сервис-воркеры и прогрессивные веб-приложения

Сервис-воркер — это скрипт, который работает в веб-браузере и управляет кэшированием данных приложения. Это — один из механизмов, используемых при превращении обычного веб-сайта в прогрессивное веб-приложение (PWA, Progressive Web Application). С PWA можно работать как с обычным сайтом, пользуясь HTTPS, но прогрессивные веб-приложения обладают некоторыми особыми возможностями. Среди таких возможностей, например, установка таких приложений на мобильные устройства без необходимости публикации их в специализированных магазинах приложений и поддержка работы приложений без доступа к интернету.

Пользоваться сервис-воркерами можно в Angular, React и Vue:

• Angular. В Angular предусмотрены механизмы для использования сервис-воркеров.
• React. Вот руководство по разработке PWA с помощью Create React App.
• Vue. Возможность создания PWA во Vue поддерживается на уровне CLI.

▍Серверный рендеринг

Серверный рендеринг (SSR, Server-Side Rendering) — это набор технологий, который кардинальным образом меняет ситуацию в сфере разработки приложений, основанных на Angular, React и Vue. При использовании SSR HTML-код формируется на сервере и отправляется в браузер. После этого осуществляется приведение статической HTML-разметки в рабочее состояние и на клиенте оказывается полностью готовое к использованию веб-приложение. При применении серверного рендеринга преследуют несколько целей:

• Улучшение SEO сайтов.
• Ускорение вывода сайтов в браузере.

Вот SSR-решения для исследуемых нами фронтенд-инструментов:

▍Генераторы статических сайтов

С ростом масштабов использования Jamstack генераторы статических сайтов (SSG, Static Site Generator) стали крайне востребованной технологией. Jamstack-приложение — это разновидность веб-приложения, материалы которого готовы к визуализации средствами браузера и, по сути, не нуждаются в веб-сервере (эти материалы можно отдавать клиентам прямо с CDN). Подробности о таких сайтах можно найти, пройдя по вышеприведённой ссылке. Перечислим здесь лишь основные сильные стороны SSG:

• Скорость: генераторы статических сайтов создают страницы сайтов во время сборки проекта, а не тогда, когда эти страницы запрашиваются клиентом.
• Безопасность: применение SSG позволяет отказаться от систем управления контентом (CMS, Content Management System), которые часто оказываются целями хакерских атак.
• Упрощение масштабирования: веб-проект при применении SSG представляет собой набор файлов, который можно передать клиенту откуда угодно. Это значительно упрощает хранение подобных файлов в CDN. В результате оказывается, что статические сайты очень хорошо масштабируются.
• Упрощение процесса разработки: SSG-проектам не нужна серверная часть и база данных. Это облегчает труд разработчиков.

Существуют SSG-решения для Angular, React и Vue:
Среди других SSG-проектов можно отметить следующие: 11ty, Hugo, Jekyll.

Аналитика

▍Наблюдение за поведением пользователей и A/B-тестирование

Организация наблюдения за поведением пользователей на сайте — это необязательно, но владение подобными данными вносит значительный вклад в совершенствование веб-проектов. Существует особый класс инструментов, направленных на сбор сведений о работе пользователей с сайтом. Эти инструменты позволяют разработчикам сайтов лучше учитывать нужды пользователей и, благодаря A/B-тестированию, помогают выбирать самые адекватные альтернативы. Речь идёт о возможностях сайтов, о поддерживаемых ими шаблонах поведения пользователей, о дизайне.

Вот некоторые решения, позволяющие организовать наблюдение за поведением пользователей и A/B-тестирование:

• Google Analytics (GA). Существуют руководства по использованию GA в Angular, React и Vue.
• Kameleoon. Это — основанный на технологиях искусственного интеллекта фреймворк для персонализации и A/B-тестирования веб-проектов.

▍Анализ производительности веб-проектов

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

Среди инструментов разработчика Google Chrome можно найти весьма ценное средство для анализа производительности сайтов — Lighthouse. Оно оценивает сайты по пяти критериям (производительность, доступность, использование «лучших практик», SEO, PWA) используя 100-балльную шкалу. После анализа формируется отчёт с рекомендациями по улучшениям сайта.

Анализ сайта с помощью Lighthouse

Ещё одно средство анализа производительности, которое можно найти среди инструментов разработчика Chrome, это панель Coverage, позволяющая искать неиспользуемый JS и CSS-код. Исключив такой код из проекта, можно уменьшить размер его бандла. А это ускорит загрузку сайта, что будет особенно заметным на мобильных устройствах.

▍SEO

SEO, поисковая оптимизация, это то, чем надо заниматься ради повышения рейтинга сайта в поисковых системах, в таких, как Google, Bing, DuckDuckGo, да и во многих других. Хорошо оптимизированный сайт становится более «заметным». На самом деле, это так важно, что в мире веб-разработки есть даже особая должность: «SEO-специалист».

Если говорить о SEO в Angular, React и Vue, то получится следующее:

• Angular. Вот интересная статья по поисковой оптимизации, которая применима к Angular- и к Angular Universal-проектам.
• React. Вот материал об общих проблемах SEO в React-проектах. Вот — статья об улучшении поисковой оптимизации React-приложений.
• Vue. Вот подробная статья о поисковой оптимизации Vue-приложений.

Итоги

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

Какие свежие технологии фронтенд-разработки кажутся вам самыми перспективными?

Frontend-разработчики должны быть в теме всего / Хабр

Мысли Криса Койера

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

От переводчика

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

Содержание

1. Frontend-разработчик должен разбираться в дизайне
2. Frontend-разработчик должен разбираться в работе серверной части (backend)
3. Frontend-разработчик должен разбираться в работе сетей
4. Frontend-разработчик должен разбираться в производительности
5. Frontend-разработчик должен разбираться в контент-стратегии
6. Frontend-разработчик должен разбираться в базах данных
7. Frontend-разработчик должен разбираться в тестировании
8. Frontend-разработчик должен разбираться в системах сборки
9. Frontend-разработчик должен разбираться в методологиях разработки
10. Frontend-разработчик должен разбираться в настройке веб-серверов
11. Frontend-разработчик должен разбираться в юзабилити
12. Frontend-разработчик должен разбираться в мобильном дизайне

Frontend-разработчик должен разбираться в дизайне

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

К прочтению:

1. Памятка дизайнеру сайтов
2. Принцип цикады и почему он важен для веб-дизайнеров
3. Стив Круг «Веб-дизайн или Не заставляйте меня думать»
4. Якоб Нильсен «Веб-дизайн»
5. Дональд Норман «Дизайн привычных вещей»
6. Джеф Раскин «Интерфейс»
7. Как за 15 лет изменились главные страницы Apple, Microsoft, IBM, Sony
8. Ководство
9. О дизайне
10. Почему курсор мыши наклонён на 45°?
11. Наберитесь смелости сделать не как все. 12 устаревших интерфейсных и технологических решений
12. Имена людей и интерфейс
13. User experience design: как построить сайт для клиентов, а не для себя
14. Главные особенности китайского веб-дизайна и их истоки

Frontend-разработчик должен разбираться в работе серверной части (backend)

Даже если вы и не backend-разработчик, то вы явно осознаёте всю важность серверной части. Вы понимаете, с чем взаимодействует backend, что передается на сервер, а что нет. Вы знаете об обязанностях backend-разработчика. Вы понимаете, какой язык используется на сервере, и при этом должны уметь объяснить, что должен дать вам backend и что нужно от серверной части frontend-а.

К прочтению:

1. Чему мы научились, разрабатывая backend
2. Собеседование на должность PHP Backend Developer в Германии
3. Пишем backend для мобильного приложения за несколько минут
4. Что должно быть впереди фронтэнд или бекенд?
5. Что нужно знать, чтобы стать Backend разработчиком?
6. Что должен знать «PHP Junior Developer без опыта работы»?
7. Какими технологиями должен обладать backend разработчик (уровень начальных знаний — новичок+)?

Frontend-разработчик должен разбираться в работе сетей

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

К прочтению:

1. Принципы работы сети Интернет
2. Архитектура и принципы работы сети
3. Принцип работы торрент-сетей и как достигается высокая скорость
4. Руководство по TCP/IP для начинающих
5. Domain Name Service — cлужба Доменных Имен

Frontend-разработчик должен разбираться в производительности

Если вы не сосредоточены на производительности, то знаете, что производительность имеет важное место в успехе вашего проекта. Frontend-разработчики знают об этом нелегком мире. Нужные навыки помогут вам одержать быструю победу в долгой борьбе. Необходимо понимать насколько быстрым должен быть backend, а также, что оставшиеся 80% времени это загрузка сайта, т.е. это frontend.

К прочтению:

1. Производительность web: Why Performance Matters
2. Тонкости производительности
3. Выигрыш в производительности для rel=noopener
4. Измерение производительности веб-страниц
5. Улучшаем UX посредством оптимизации
6. Подходы к оптимизации (веб-)приложений
7. Пример веб-производительности
8. Производительность рендеринга картинок в Web
9. 10 Ways to Test Your Website Performance

Frontend-разработчик должен разбираться в контент-стратегии

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

К прочтению:

1. Как создать контент-стратегию, которую будут обсуждать
2. Супер контент-стратегия. 5 успешных примеров
3. Нужна ли контент-стратегия при наполнении сайта?
4. Эрин Киссейн «Основы контентной стратегии»
5. Как построить SMM-стратегию: пошаговый план продвижения в социальных сетях
6. Как оптимизировать контент для SEO и SMM?

Frontend-разработчик должен разбираться в базах данных

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

К прочтению:

1. Введение в базы данных
2. Базы данных: SQL (DDL/DML)
3. Ускоряем базу данных веб-сайта
4. Веб-интерфейс для баз данных размером в один .php файл
5. Возможности PostgreSQL, которых нет в MySQL, и наоборот
6. HTML 5. Работа с Web SQL базой данных
7. Базы данных и NoSQL
8. Как отобразить 350 миллионов строк из базы данных на Web-форме
9. Встраиваемая JavaScript база данных с прицелом на API совместимость с MongoDB

Frontend-разработчик должен разбираться в тестировании

Существует большое количество видов тестирования. Интеграционное тестирование. Регрессионное тестирование. Пользовательское тестирование!

К прочтению:

1. Тестирование программного обеспечения
2. Зачем нужны тесты?
3. Модульные тесты и интеграционные: в чём разница?
4. Тестирование
5. JavaScript Testing курс (eng)
6. QUnit. Тестирование javascript кода
7. Как развиваться начинающему тестировщику?
8. Повышаем стабильность Front-end
9. Бек Кент. Экстремальное программирование. Разработка через тестирование
10. Пишем свой первый юнит-тест, на примере методологии BDD и библиотеки Jasmine
10. Процесс тестирования мобильных приложений
11. Макгрегор Джон, Сайкс Девид. Тестирование объектно-ориентированного программного обеспечения
12. Тестирование JS. Кармический Webpack

Frontend-разработчик должен разбираться в системах сборки

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

К прочтению:

1. Webpack – один из самых мощных и гибких инструментов для сборки frontend
2. Grunt — Обзор системы сборки
3. Автоматизация сборки
4. Приятная сборка frontend проекта
5. Сравнение популярных систем сборки для frontend-разработчиков
6. Grunt vs Gulp сравнение систем сборки для front-end разработчика
7. Gulp или Grunt, да всё равно
8. Методология сборки БЭМ-проекта

Frontend-разработчик должен разбираться в методологиях разработки

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

К прочтению:

1. Необходимый минимум для фронтенд-разработчика
2. Методологии фронтенд-разработки
3. Советы front-end разработчику
4. Какими знаниями должен обладать Front-end разработчик в 2015 году
5. Что нужно знать и уметь front end разработчику в 2015/2016
6. Карта развития веб-разработчика
7. Основные навыки фронтенд-разработчика
8. Isobar Front-end Code Standards
9. Front-end Style Guides
10. JavaScript Style Guide
11. Coding style (Mozilla)

Frontend-разработчик должен разбираться в настройке веб-серверов

Без них не было бы веб-сайтов.

К прочтению:

1. Основные типы серверов
2. Что такое веб-сервер
3. Веб-сервер
4. Простым языком об HTTP
5. Веб-сервисы в теории и на практике для начинающих
6. Сравнение веб-серверов
7. Web-сервера и их использование для управления нагрузкой на приложение.
8. PHP. Встроенный web-сервер
9. Локальный веб-сервер
10. Использование преимуществ встроенного PHP сервера
11. Как поднять сервер для python скриптов за 1 минуту

Frontend-разработчик должен разбираться в юзабилити

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

К прочтению:

1. Юзабилити
2. Юзабилити сайта
3. 10 советов по юзабилити сайта, основанных на результатах исследований
4. Основы юзабилити (usability) сайтов
5. Юзабилити-тестирование (ИТМО)
6. Usability vs. User Experience
7. What is the difference between UX and UI designer and web designer?

Frontend-разработчик должен разбираться в мобильном дизайне

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

К прочтению:

1. Лучшие практики по мобильному UX от Ника Бабича
2. Адаптивный веб-дизайн
3. Responsive Web Design: What It Is And How To Use It
4. Книга Итана Маркотта «Отзывчивый веб-дизайн»
4. 10 адаптивных фреймворков для веб-дизайна
5. Responsive Web Design Fundamentals курс (eng)

Заключение

Это всего лишь часть того, что должен знать frontend-разработчик. Чем больше, тем лучше. Все это, конечно, познается в работе. HTML, CSS, JavaScript, адаптивный дизайн, библиотеки и фреймворки — этот список может долго не заканчиваться.

Что нужно знать, чтобы стать фронтенд-разработчиком в 2018

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

Каждое веб-приложение состоит из двух частей: фронтенда – клиентской части веб-приложения, которая содержит всё, что вы видите и с чем взаимодействуете в браузере как пользователь приложения, и бэкенда, или серверной части, в которой хранятся данные веб-приложения, обновляются и обрабатываются, а затем передаются клиентской части.

Вспомните ваш любимый видеохостинг: когда вы воспроизводите видео, сервер достаёт его для вас из базы данных: это бэкенд. Фронтенд воспроизводит его для вас в браузере и позволяет взаимодействовать с ним с помощью UI (ставить на паузу, перематывать, открывать на весь экран или делиться видео с другими людьми).

Как веб-разработчик, вы должны иметь некоторые знания о том, как бэкенд и фронтенд взаимодействуют друг с другом. Тем не менее, на рынке, как правило, должность веб-разработчика разделяют на фронт- и бэкенд. Последние используют такие языки программирования, как Python, PHP, Ruby, Java для того, чтобы запрограммировать всё,что происходит “под капотом” веб-приложения. Фронтендеры же используют HTML, JavaScript и CSS для разработки внешнего вида страниц, так что данные инструменты однозначно относятся к тем, которые позволят стать фронтент-разработчиком.

HTML (Hypertext Markup Language)

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

CSS (Cascade Style Sheets)

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

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

JavaScript

JS – первый язык программирования, который необходимо изучить фронтенд-разработчику. Это постоянно развивающийся ЯП, который сейчас используется повсеместно. Фронтенд-разработчики пишут JavaScript-код для браузера, используя DOM (Document Object Model) – представление веб-сайта или приложения в виде дерева объектов, которое обеспечивает связь между JS-кодом и браузером. Каждый элемент страницы представляется в виде DOM и позволяет JavaScript’у манипулировать ими.

Например, у вас на сайте есть кнопка с надписью “Click me!”. С помощью HTML разработчик устанавливает надпись на кнопке, с помощью CSS – её внешний вид, а с JavaScript – действие на веб-странице, которое происходит после нажатия этой кнопки.

Текстовый редактор

В нём вы будете проводить большую часть времени, занимаясь фронтенд-разработкой. Выберите себе редактор по душе (например, Visual Studio Code, Atom или Sublime text), освойте его и установите необходимые плагины.

Инструменты разработчика в браузере

Инструменты разработчика в Google Chrome и Mozilla Firefox позволяют интерактивно посмотреть, как сайт структурирован, поэкспериментировать с его внешним видом, провести дебаг JavaScript-кода.

Система контроля версий (Git)

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

1. SASS

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

2. Фреймворки и библиотеки

jQuery известна еще с 2006 года и до сих пор используется на многих веб-сайтах. Это не новая библиотека, но всё ещё актуальная. jQuery позволяет добавлять на страницу сложные JavaScript взаимодействия. Среди прочих библиотек и фреймворков стоит обратить внимание на React, Angular и Vue.js. Они значительно облегчают и упрощают создание и сопровождение веб-приложений со сложным UI и большим количеством элементов. Twitter Bootstrap – фреймворк, предоставляющий большое количество шаблонов для многих часто используемых видов веб-страниц и элементов интерфейса

3. Терминал (командная строка)

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

4. Сборщики модулей

Инструменты вроде Gulp, Grunt, Webpack необходимо применять, когда в вашем веб-приложении используется много библиотек и фреймворков. Gulp справляется с компиляцией Sass, CoffeeScript, c картами кода, шаблонами, значительным образом ускоряя работу веб-приложений. Подобные инструменты также крайне важно изучать, чтобы стать фронтенд-разработчиком.

5. WordPress

25% сайтов сделаны на WordPress – бесплатной, гибкой и удобной системе управления контентом с открытым исходным кодом. Несмотря на то, что WP считается платформой для блогов, функционал может быть расширен с помощью сотен плагинов с открытым исходным кодом.

6. Графический редактор

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

Так как стать фронтенд-разработчиком в 2018 году? Список довольно велик, но если составить план обучения и последовательно осваивать все необходимые технологии по одной за раз, вы приобретете нужные навыки. Данный перечень может измениться уже в 2019 году, но с этой информационной подушкой вам будет намного легче изучать все новое в дальнейшем. Для начала сконцентрируйтесь на основах в виде HTML, CSS и JavaScript, отберите для себя лучшие источники информации и дерзайте!

Источник

Как изменить карьеру, стать frontend-разработчиком в 30 лет и работать в свое удовольствие

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

Сегодня публикуем историю студента GeekBrains Александра Жуковского (Alex_zhukovski), который изменил свою профессию в 30 лет и стал фронтенд-разработчиком, участвуя в реализации достаточно крупных проектов. Пока что он находится в начале пути, но твердо собирается продолжать карьеру в IT.

В этой статье бы хотел поделиться личным опытом получения дополнительного образования в сфере IT и рассказать о том, как новые знания и опыт помогли мне начать новую страницу своей жизни. Да, меня зовут Александр, мне 30 лет. Сразу скажу, что занимаюсь разработкой сайтов, фронтендом. Эта тема мне была интересна всегда, и раньше время от времени я занимался относительно простыми проектами по разработке веб-страниц, зная лишь HTML и частично CSS.

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

Зачем мне веб-разработка

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

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

Один из мотивов для смены профессии — свобода. Многие IT-специальности позволяют работать из любой точки мира, был бы ноутбук и подключение к сети. В плане работы вне офиса тоже есть два варианта — полный фриланс, и ставка, но «свободная».

Как все начиналось

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

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

Оба пошли на курс «Frontend-разработчик». В описании курса сказано, что разработчики овладеют JavaScript, HTML, CSS, и, в целом, все так и есть, нужные навыки и знания мы получили.

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

Что изменилось?

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

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

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

Работа на Мальте

У меня есть и основная работа, вот уже несколько лет я начальник технической поддержки в технологической компании. Три года назад мне сделали предложение по работе (правда, основной, не frontend), и я переехал по рабочей визе на Мальту. Отмечу, что работа интересная, негативных моментов мало. Но хочется больше свободы, если так можно выразиться.

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

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

Мальта ночью

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

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

Кстати, плюс здесь еще и в том (как и в любой другой европейской стране), что можно заказывать без налогов гаджеты, много и сразу. Я заказал кучу всего, чему очень рад. Речь идет, в первую очередь, о налоговых сборах при покупке гаджетов в интернет-магазинах России, Беларуси, Украины и других стран СНГ. Лояльность местных таможенных законов позволяет заказывать товары из зарубежных магазинов (начиная c Amazon и заканчивая Aliexpress) не платя таможенную пошлину, хотя на некоторые товары все же она есть.

Хобби — ремонт яхты, отвечаю за электронику, двигатель

Текущие проекты по фронтенду

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

Первый — интернет-магазин бытовой техники. Его я написал с нуля, поскольку магазин, который уже был у заказчика, безнадежно устарел (его CMS — Cotonti). Одно из пожеланий — возможность интеграции с 1C версии 7.7. После девяти недель работы этот заказ я выполнил, и сейчас он отлично работает, не вызывая нареканий, чему я рад.

Второй крупный проект — разработка корпоративного портала одной довольно известной компании. Сейчас я руковожу этим проектом. Его ядро — WP. В ходе разработки используем PHP, Java, jQuery AJAX, HTML5, CSS. Используется все, плюс асинхрон, GZIP, Lazy Load, ряд фреймворков. По мере возможности канала и распределения памяти к каждому подключению загружаются ресурсы с иных источников, например CDN. Ресурс идентифицирует устройство пользователя и подгружает лишь те элементы, которые в настоящий момент присутствуют на дисплее.

Итоговый продукт, сайт, даст возможность сотрудникам компании работать, находясь в любой точке мира. Они смогут получать доступ к бухгалтерским и юридическим документам. К сожалению, большего сказать не могу. Что касается реализации проекта, то я управляю командой разработчиков, каждый из которых выполняет свою часть работы. Я тоже выполняю несколько задач в качестве разработчика. Мне уже приходилось управлять крупными проектами, пускай и не такими масштабными, но теперь я часть его — не только менеджер, но и девелопер. Я смогу с гордостью сказать: «Смотрите, часть этого проекта сделал я!»

Советы тем, кто боится зайти в IT

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

Что должен знать frontend-разработчик и кто это такой

Тематический трафик – альтернативный подход в продвижении бизнеса

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Front-end разработчик – это программист, основная задача которого состоит в разработке пользовательского интерфейса, то есть UI дизайна. Другими словами, данный специалист отвечает за внешнюю часть веб-ресурса в браузере, с которой контактируют посетители. Именно поэтому он должен сделать интерфейс максимально удобным и интуитивно понятным, чтобы взаимодействие и процесс поиска нужного раздела или информации не занимало у человека много времени и переходов с одной страницы на другую.

Front-end разработчик: кто это и чем он занимается

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

1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
3. После того как основная часть работы выполнена, он приступает к тестированию работы.
4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

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

За что отвечает фронт-энд разработчик

Среди основного набора инструментов, которыми должен свободно владеть специалист, можно отметить JavaScript, HTML и CSS. С их помощью он должен создавать элементы, которые будут доступны для прочтения всем браузерам на ПК и смартфонах. Если предоставленный ему макет не отвечает всем потребностям и идеям проекта, он должен самостоятельно доработать недочеты, учитывая нюансы не только в сфере дизайна, но и технические детали. Помимо этого, он должен уметь пользоваться дополнительными инструментами, такими как библиотека, написанная на языке JavaScript, динамический язык стилей LESS, Backbone и т. д.Все это позволит ему, во-первых, в автоматическом режиме выполнять сложную и в то же время повторяющуюся часть работы, во-вторых, значительно увеличить производительность труда, добиваясь больших результатов за короткое время.

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

Чтобы посмотреть написанный им код, пользователь может вызвать контекстное меню на страницах веб-ресурса, выбрав комбинацию клавиш Ctrl+Shift+L, либо нажав правой кнопкой мыши на свободном месте и перейдя в раздел «Посмотреть код».

Что нужно знать начинающему front-end разработчику

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

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

Также начинающий front-end разработчик должен знать, где именно он может получить соответствующие знания и образование, подкрепленное дипломом. Во-первых, он может поступить в Международный учебный центр IT-образования «Компьютерная академия Шаг». Здесь только очное отделение, а выпускники получают соответствующие сертификаты и международный диплом. На сегодняшний день филиалы академии представлены в шестнадцати странах мира. Во-вторых, можно пройти онлайн-курсы в Образовательном IT-портале GeekBrains. За шестинедельный курс здесь можно пройти стажировку.

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

Как стать front-end разработчиком

Карьерный путь специалиста, как правило, начинается с обычного верстальщика. Далее, в дополнении к имеющимся знаниям рабочей связки HTML+CSS, приобретаются знания и навыки в JavaScript и сопутствующих инструментах, включая графические редакторы. Если человек изначально знает, кем он хочет быть, он может пройти обучение в соответствующих учебных заведениях, что позволит ему узнать основу профессии сразу, а не частями.

Когда базовые знания получены, необходимо приступить к самосовершенствованию. Чтобы стать профессиональным front-end разработчиком, человек может воспользоваться одним из нескольких путей развития:

1. Совершенствовать свои навыки как специалиста, занимаясь различными проектами в роли фрилансера – это горизонтальный путь развития.
2. Устроиться в компанию и расти по карьерной лестнице – это вертикальный путь развития.

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

13 навыков, которые необходимы, чтобы стать фронтенд-разработчиком 2020

Хотите знать, подходят ли вам технологии?

Должен ли ты быть дизайнером, исходя из ВАШИХ сильных сторон? Front-end разработчик? Или даже специалист по цифровому маркетингу? Пройдите нашу 3-минутную викторину, чтобы выяснить, подходит ли вам техническая карьера.

Вы когда-нибудь смотрели на свой любимый веб-сайт и задавались вопросом, почему он устроен именно так, как работают кнопки, когда вы их нажимаете, или любую другую часть сайта и думали: «Интересно, насколько это сложно?» или «Хотел бы я сделать это»? Что ж, все эти видимые функции сайта создаются посредством разработки внешнего интерфейса (иногда также называемого «веб-разработкой внешнего интерфейса») — и люди, стоящие за ними, имеют имя: разработчики внешнего интерфейса.

Front-end разработчики — одни из самых востребованных ролей, и не зря — без них мы не смогли бы наслаждаться черными дырами в Интернете. Через секунду мы разберем все навыки, которые могут понадобиться разработчикам интерфейса, но вот краткое определение разработки интерфейса:

Что такое Front End Development?

В то время как веб-дизайн — это то, как выглядит веб-сайт, интерфейсная разработка — это то, как этот дизайн фактически внедряется в Интернете.

Итак, что такое Front-End разработчик?

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

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

Содержание

1. Какие навыки используют фронтенд-разработчики?
2. HTML / CSS
3. JavaScript
4. jQuery
5. Фреймворки JavaScript
6. Фреймворки переднего плана
7. Препроцессоры CSS
8. Сервисы / API RESTful
9. Адаптивный / мобильный дизайн
10. Кросс-браузерная разработка
11. Системы управления контентом
12. Тестирование / Отладка
13. Git / Контроль версий
14. Решение проблем
15. Что дальше?

Какие навыки используют веб-разработчики переднего плана?

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

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

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

Skillcrush’s Front End Developer Blueprint — это онлайн-курс, который можно пройти за 3 месяца, потратив час в день на изучение материалов.В ходе курса вы получите прочную основу для того, чтобы получить работу разработчика, которая вам нужна. Вы начнете с таких навыков, как HTML и CSS, а затем перейдете к более продвинутым навыкам, таким как адаптивная веб-разработка, Git и JavaScript.

(вверх)

HTML и CSS

HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) являются основными строительными блоками веб-кодирования. Без этих двух вещей вы не сможете создать дизайн веб-сайта, и все, что вы получите, — это неформатированный простой текст на экране.Вы даже не можете добавлять изображения на страницу без HTML!

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

Самое приятное: одни только знания HTML и CSS позволят вам создавать простые веб-сайты.

(вверх)

JavaScript

JavaScript позволяет добавить к вашим веб-сайтам массу дополнительных функций, и вы можете создавать множество базовых веб-приложений, используя только HTML, CSS и JavaScript (сокращенно JS).На самом базовом уровне JS используется для создания и управления такими вещами, как карты, которые обновляются в реальном времени, интерактивные фильмы и онлайн-игры. Такие сайты, как Pinterest, активно используют JavaScript, чтобы упростить пользовательский интерфейс (тот факт, что страница не перезагружается, когда вы что-то закрепляете, — это благодаря JavaScript!).

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

Подробнее о JavaScript здесь: Tech 101: Что такое JavaScript?

(вверх)

jQuery

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

(вверх)

Фреймворки JavaScript

JS-фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашему JavaScript-коду.Существуют разные типы JavaScript-фреймворков для разных нужд, хотя четыре упомянутых являются наиболее популярными в реальных списках вакансий. Эти фреймворки действительно ускоряют разработку, давая вам толчок, и могут использоваться с такими библиотеками, как jQuery, чтобы свести к минимуму объем написания кода с нуля.

(вверх)

Фреймворки переднего плана

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

(вверх)

Опыт работы с препроцессорами CSS

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

(вверх)

Опыт работы с RESTful Services и API

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

Допустим, вы хотели написать приложение, которое показывает всех ваших друзей в социальных сетях в порядке, в котором вы стали друзьями. Вы можете позвонить в RESTful API Facebook, чтобы прочитать список друзей и вернуть эти данные. То же самое и с Twitter (который также использует RESTful API). Общий процесс одинаков для любой службы, использующей RESTful API, только возвращаемые данные будут другими.

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

(вверх)

Хотите знать, подходят ли вам технологии?

Должен ли ты быть дизайнером, исходя из ВАШИХ сильных сторон? Front-end разработчик? Или даже специалист по цифровому маркетингу? Пройдите нашу 3-минутную викторину, чтобы выяснить, подходит ли вам техническая карьера.

Адаптивный и мобильный дизайн

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

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

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

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

(вверх)

Кросс-браузерная разработка

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

Узнайте больше о кросс-браузерной совместимости здесь и здесь или ознакомьтесь с Руководством по кроссбраузерности Дэниела Херкена для более глубокого погружения.

(вверх)

Системы управления контентом и платформы электронной коммерции

Почти каждый веб-сайт построен на системе управления контентом (CMS). (Платформы электронной коммерции представляют собой особый тип CMS.) Самая популярная CMS в мире — это WordPress, которая скрыта за кулисами миллионов веб-сайтов (включая Skillcrush!) — почти 60% веб-сайтов, использующих CMS, используют WordPress.

Другие самые популярные CMS включают Joomla, Drupal и Magento.Зная, что они не вызовут на вас такого же спроса, как на эксперта по WordPress, они могут дать вам нишу, которая будет желательна среди компаний, использующих эти системы (а их много).

Чертеж внештатного разработчика WordPress

Skillcrush — отличное место, чтобы узнать, что вам нужно знать, чтобы начать работу!

(вверх)

Тестирование и отладка

Это факт жизни для интерфейсного веб-разработчика: ошибки случаются. Знание процессов тестирования и отладки имеет жизненно важное значение.

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

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

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

(вверх)

Git и системы контроля версий

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

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

(вверх)

Навыки решения проблем

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

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

(вверх)

Итак, вы готовы стать фронтенд-разработчиком? Что дальше?

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

Если вам нравится работать фронтенд-разработчиком, но вы не знаете, где получить необходимые навыки, то вы попали в нужное место! Skillcrush’s Front End Developer Blueprint — это онлайн-курс, который можно пройти за 3 месяца, потратив час в день на изучение материалов.

В ходе курса вы получите прочную основу на пути к тому, чтобы получить работу разработчика, которая вам нужна. Вы начнете с таких навыков, как HTML и CSS, а затем перейдете к более продвинутым навыкам, таким как адаптивная веб-разработка, Git и JavaScript.

(вверх)

.

10 лучших навыков фронтенд-разработчиков, которые вам необходимо знать

Веб-разработка состоит из двух важных частей, каждая из которых требует различных навыков и знаний технологий. Front-end разработчик занимается тем, с чем взаимодействует пользователь, а back-end — это все, что происходит за кулисами и делает это возможным. В этой статье мы обсудим навыки фронтенд-разработчика, которые вы должны знать, в следующей последовательности:

Что такое фронтенд-разработка?

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

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

Кто такой Front End разработчик?

Front-end разработчик — это тот, кто реализует веб-дизайн с помощью таких языков программирования, как HTML, CSS и JavaScript .Разработчики внешнего интерфейса работают над дизайном и внешним видом сайта. В то время как внутренние разработчики программируют то, что происходит за кулисами, например базы данных. Если вы перейдете на какой-либо сайт, вы увидите работу фронтенд-разработчика в навигации , макетах , а также то, как сайт выглядит по-другому, чем на вашем телефоне.

Веб-дизайн — это то, как выглядит веб-сайт, а — разработка внешнего интерфейса. — это то, как дизайн фактически реализуется на веб-сайте. Front-end разработчик — это человек, ответственный за реализацию.

Тенденции рабочих мест и заработной платы

По данным TechRepublic, веб-разработка является одним из 10 самых востребованных технических навыков в 2019 году. Недавняя статистика Бюро статистики труда США прогнозирует, что к 2026 году , количество вакансий веб-разработчиков вырастет на 15% по сравнению с 2016 .

Некоторые из ключевых ролей внешнего разработчика включают:

• Front End Engineer
• Junior Front End Developer
• Front End Software Engineer
• Front End Developer

Среднее Заработная плата Front End разработчика составляет 4,94,103 в , Индия .

Если говорить о диапазоне зарплат в USA , старший Front-end разработчик зарабатывает в среднем $ 101 747 . Принимая во внимание, что младший Front-end разработчик имеет среднюю зарплату $ 70 687 .

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

10 лучших навыков фронтенд-разработчиков: технические

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

1. HTML / CSS

Язык гипертекстовой разметки (HTML) — стандартный язык разметки, используемый для создания веб-сайтов. страниц. Это самый простой строительный блок, необходимый для разработки веб-сайтов. CSS (каскадные таблицы стилей) — это язык, используемый для представления документа, который вы создаете с помощью HTML.

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

2. JavaScript / jQuery

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

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

3. Фреймворки

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

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

4. Адаптивный дизайн

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

Это неотъемлемая часть CSS-фреймворков , таких как Bootstrap . Все эти навыки взаимосвязаны, поэтому, изучая одно, вы часто будете одновременно совершенствовать другие.

5. Контроль версий / Git

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

6. Тестирование / отладка

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

Модульное тестирование — это еще один метод, который проверяет наименьший бит кода и исследует его индивидуально для правильной работы. Тестирование — большая часть процесса разработки внешнего интерфейса, и вам могут помочь фреймворки. Такие программы, как Mocha и Jasmine , предназначены для ускорения и упрощения процесса тестирования.

7. Инструменты разработчика браузера

Современные веб-браузеры оснащены инструментами разработчика для тестирования и отладки.Эти инструменты позволяют тестировать веб-страницы в самом браузере и выяснять, как страница интерпретирует код.

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

8. Производительность в Интернете

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

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

9. Предварительная обработка CSS

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

Доступны три типа препроцессоров, такие как Sass, LESS и Stylus .Вы должны написать код, который помогает препроцессору и, в свою очередь, преобразуется в CSS, который будет работать для веб-сайта.

10. Командная строка

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

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

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

Навыки фронтенд-разработчиков: нетехнические

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

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

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

Ознакомьтесь с нашей программой Full Stack Web Developer Masters Program, которая включает в себя обучение под руководством инструктора и практический опыт работы с проектами. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями.Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Есть к нам вопрос? Пожалуйста, укажите это в разделе комментариев в блоге «Навыки Front End Developer», и мы свяжемся с вами.

.

10 навыков, необходимых для получения первой работы фронтенд-разработчика

Хотите знать, подходят ли вам технологии?

Должен ли ты быть дизайнером, исходя из ВАШИХ сильных сторон? Front-end разработчик? Или даже специалист по цифровому маркетингу? Пройдите нашу 3-минутную викторину, чтобы выяснить, подходит ли вам техническая карьера.

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

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

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

Не упустите и другие важные навыки цифрового маркетинга. Смотрите на YouTube:

Что такое Front End разработчик?

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

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

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

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

Все три ( One North Interactive, En Masse Entertainment и Aha! Labs ) используют ранее упомянутые HTML, CSS и Javascript в своем списке квалификаций. Возможно, вы уже догадались об этом. Но есть и некоторые менее знакомые термины, плавающие в списках. Управление версиями? Платформы предварительной обработки? Рамки?

Это все термины, которые станут вам хорошо знакомы по мере того, как вы начнете изучать технические навыки, но чтобы облегчить вам понимание, вот удобоваримый список (и описание!) Из 10 основных навыков, которые необходимы каждому фронтенд-разработчику.

10 обязательных навыков фронтенд-разработчика

1. HTML / CSS

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

Но давайте сделаем шаг назад и посмотрим, что такое HTML и CSS.

HyperText Markup Language (HTML) — это стандартный язык разметки, используемый для создания веб-страниц. Язык разметки — это ваш способ делать заметки в цифровом документе, которые можно отличить от обычного текста.Это самый простой строительный блок, который вам понадобится для разработки веб-сайтов.

CSS (каскадные таблицы стилей) — это язык, используемый для представления документа, который вы создаете с помощью HTML. Там, где HTML появляется на первом месте и создает основу для вашей страницы, CSS следует за ним и используется для создания макета страницы, цвета, шрифтов и… ну, стиля!

Оба этих языка абсолютно необходимы для фронтенд-разработчика. Проще говоря, ни HTML / CSS, ни веб-разработки.

2.JavaScript / jQuery

Еще одним ГЛАВНЫМ инструментом в вашем наборе инструментов фронтенд-разработчика будет JavaScript (JS). Там, где HTML — это язык разметки, а CSS — это язык таблиц стилей, JS — это первый упомянутый мной язык, который является настоящим языком программирования. Какая разница? Если HTML и CSS определяют представление страницы, JS определяет функцию.

В некоторых случаях вполне подойдет очень простой веб-сайт или веб-страница, но в ситуациях, когда вам нужны интерактивные функции — аудио и видео, игры, возможности прокрутки, анимация страниц — JS — это инструмент, который вы будете использовать для их реализации (хотя как CSS развивается, он начинает выполнять многие из этих обязанностей).

Одна интересная вещь, о которой следует помнить о JS, — это наличие таких библиотек, как jQuery, набора плагинов и расширений, которые делают использование JS на вашем веб-сайте быстрее и проще. jQuery выполняет общие задачи, требующие нескольких строк JS-кода, и сжимает их в формат, который может быть выполнен с помощью одной строки. Это будет большим подспорьем при написании кода на JS. Если, конечно, вы не любите экономить время. 😉

3. Фреймворки CSS и JavaScript

Подождите, мы уже рассмотрели CSS и Javascript, верно?

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

Фреймворки

CSS и JavaScript — это коллекции файлов CSS или JS, которые выполняют большую часть работы за вас, предоставляя общие функции (например, вход на веб-сайт или поиск в блоге). Вместо того, чтобы начинать с ПУСТОГО текстового документа, вы начинаете с файла кода, в котором уже есть много замечательных JS.

У фреймворков

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

Чтобы сделать вещи еще более интересными, вы можете использовать фреймворки вместе. Обычно Bootstrap сочетается с другим фреймворком JavaScript, например AngularJS. Контент обрабатывается Angular, а внешний вид — Bootstrap (с добавлением некоторого CSS).

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

4. Предварительная обработка CSS

Да, еще один навык, связанный с CSS!

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

Используя препроцессор CSS, такой как Sass, LESS или Stylus, вы можете писать код на языке препроцессора (что позволяет вам делать вещи, которые могут оказаться огромной проблемой с простым старым CSS). Затем препроцессор преобразует этот код в CSS, чтобы он работал на вашем веб-сайте.

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

5. Контроль версий / Git

Почти половина списка, и мы наконец подошли к навыку без HTML, CSS или JS в названии.

Тем не менее, все еще полностью связан!

После всей вашей тяжелой работы по разметке с помощью HTML, стилизации с помощью CSS и программирования с помощью JS вы претерпите ряд изменений в своей разработке.

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

Программное обеспечение

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

Как вы можете себе представить, это умение, которым вы (и ваши потенциальные клиенты и работодатели) будете очень счастливы.

Хотите знать, подходят ли вам технологии?

Должен ли ты быть дизайнером, исходя из ВАШИХ сильных сторон? Front-end разработчик? Или даже специалист по цифровому маркетингу? Пройдите нашу 3-минутную викторину, чтобы выяснить, подходит ли вам техническая карьера.

6. Адаптивный дизайн

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

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

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

7. Тестирование / Отладка

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

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

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

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

8. Инструменты разработчика браузера

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

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

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

9. Инструменты построения и автоматизации / Веб-производительность

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

Вы можете создать самый крутой веб-сайт, но если он плохо работает со стороны пользователя, это не имеет значения. Производительность в Интернете говорит о количестве времени, которое требуется для загрузки вашего сайта. Если у вас возникли проблемы с производительностью, вы можете предпринять шаги для их улучшения, например оптимизировать изображения (масштабирование и сжатие изображений для максимальной производительности в Интернете) и минимизировать CSS и JavaScript (удалить все ненужные символы из кода без изменения функциональности).

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

10. Командная строка

Во многих смыслах распространение графических пользовательских интерфейсов (GUI) в вычислениях было одним из лучших событий, которые когда-либо происходили.Кто захочет набирать строки эзотерических команд на мертвом экране, чтобы обойти машину? Намного проще указать и нажать на живое интерактивное меню.

Графический интерфейс

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

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

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

МЯГКИЕ НАВЫКИ!

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

Возвращаясь к спискам внешних разработчиков на Glassdoor.com, список One North требует — до появления технических навыков:

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

А также:

«Умение работать в команде и работать с людьми из разных агентств».

А:

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

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

Поделиться этим изображением на своем сайте

Пожалуйста, укажите в этом изображении ссылку на Skillcrush.com.

< br />

.