Frontend — Привлекательное портфолио front-end. Из чего состоит


Содержание

Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют

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

Давайте начнем с определений.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».

14 ноября в 18:30, Витебск, беcплатно

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

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

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

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

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

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

Вне фронтенда и бэкенда

Автономный фронтенд

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

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

Легкий бэкенд

Бэкенд, в свою очередь, становится легче и легче. Такие технологии, как хранилища документов и графовые базы данных, приводят к сокращению количества обращений к бэкенду для повторного агрегирования данных. Задача клиента — уточнить, какие данные ему нужны (базы данных графов), или извлечь все различные фрагменты данных, которые ему нужны (REST API).

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

Размытые границы

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

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

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

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

Это перевод статьи So you want to be a front end developer — A practical guide to growth for junior developers от Стивена Томас, фронтенд тимлида в Shopify и Stiff Salt Co. Перевод выполнен Антоном Шкребко с согласия и одобрения автора оригинала специально для mkdev.

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

  1. Существует огромный спрос на веб-разработчиков. Компании пытаются найти компетентных людей, чтобы заполнить вакансии, и платят за это большие деньги;
  2. Другие компании видят этот спрос и создают образовательные ресурсы, дабы помочь карьере юным любителям бутстрапа. Они обещают решение для обучения веб разработке которое быстро приведёт их к оглушительному успеху;
  3. Обещания столь привлекательны, что большое количество людей ведётся на них. Тренинги и обучающие онлайн ресурсы раскупаются как горячие пирожки — все это быстро становится многомиллиардной индустрией.

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

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

Ладно, что дальше?

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

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

Читай книги

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

Для начинающих фронтендеров, я бы рекомендовал Eloquent JavaScript, SMACSS, и HTML and CSS: Design and Build Websites. Но не нужно останавливаться на этом.

Посещай митапы

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

Делай вклады в опенсорс проекты

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

Итак, с чего начать? Подумай об инструменте, который ты используешь, скажем… JQUERy или Bootstrap, и начинай просматривать темы, связанные с ними на Гитхабе. Есть ли что-то в этих инструментах, что требует улучшений? Создай тему, или еще лучше предложи способ этого улучшения. Ничего страшного в этом нет. Самое плохое, что может случиться – твоё предложение будет отвергнуто, зато ты получишь отклик на свою работу.

Найди работу джуниором или стажировку

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

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

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

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

Начни свой проект

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

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

Никогда не прекращай учиться

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

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

Послесловие

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

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

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

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

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

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

От нуля до героя фронтенда (Часть 1)

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

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

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

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

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

Цукерберг рекомендует:  Php - Как реализовать создание новой подкатегории

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

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

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

Практика основ HTML и CSS

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

Эксперимент 1

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

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

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

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

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


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

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

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

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

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

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

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

Кроссбраузерная поддержка

Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

Препроцессоры и постпроцессоры CSS

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

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

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

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

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

Эксперимент 3

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

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

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

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

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

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

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

Учитесь на примерах

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

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

Сворачиваемся

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

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

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Что должен знать frontend-developer?

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

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

Разработка сайта состоит из двух частей: backend и frontend. Задача backend-development — обеспечение функциональной составляющей, а frontend — визуальной.

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

Что должен уметь frontend-разработчик?

  1. Учиться;
    Желание учиться, трудолюбие и усидчивость — это важные навыки, пожалуй, не только для frontend-разработчика, но и для любого профессионала. В тот момент, когда Вы поймаете себя на мысли, что знаете и умеете всё — это первый признак того, что Вы на самом деле стоите на месте.
  2. Знать HTML и CSS

    Это основополагающие frontend-разработки. Без них Вы не сможете выстроить элементарную структуру сайта и задать основные стили.

  3. Знать JavaScript;

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

  • JavaScript фреймворки и jQuery;

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

  • Знать и уметь применять препроцессоры CSS;
    Препроцессоры позволяют, во-первых, сократить время на написание кода, обрабатывая его и превращая его в кроссбраузерный и качественный. Самые популярные препроцессоры CSS — Sass и Less.

  • К слову, о кроссбраузерной верстке — ей бы тоже неплохо владеть;
    Кроссбраузерная разработка — это Ваш козырь в рукаве, поскольку сделать так, чтобы Ваш сайт выглядел и работал одинаково во всех браузерах, не каждому под силу.
  • Владение CMS — как минимум, WordPress;
    Поскольку сайты на системе контроля контента (CMS) занимают довольно большую часть среди общего количества, а самая популярная платформа — WordPress, то, как минимум ознакомиться с особенности всё же стоит. А сделать это Вы можете в нашей одноименной рубрике.
  • Владеть основами разработки адаптивного дизайна;
    Сделать так, чтобы сайт выглядел одинаково во всех браузерах — это половина дела, а вот сделать так, чтобы Ваш дизайн не съезжал и не сжимался до размера наночастицы при открытии его на телефоне — это мастерство.
  • Иметь опыт работы с системой контроля версий;
    Самая популярная система контроля версий — Git. Опыт работы с ним добавит Вам сразу несколько баллов. Разработка сайта — коллективная работа, а, значит, Вы никогда не можете быть уверены, что никто не допустит ошибку и не загубит многомесячную работу. Выбрать не самое лучшее решение можете и Вы. И возможность откатиться к более ранней версии и исправить ошибку (а, главное, сделать выводы) Вам позволит система контроля версий Git.
  • И, наконец, понимать принципы тестирования и отладки;
    Взглянув на код, к сожалению, не всегда можно увидеть ошибки и проблемы (разве что Вы не обладает экстрасенсорными способностями). Поэтому понимание принципов тестирование и отладки — будет Вашим большим плюсом.
  • Но самый главный навык веб-разработчика — это опыт! Вы можете быть блестяще подкованы в теории, но на практике не всегда всё выглядит так гладко, как в книгах. Поэтому дерзайте!

    Профессия frontend-разработчик

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

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

    Содержание статьи:

    Кто такой frontend-разработчик и чем он занимается?

    Фронтенд получает от веб-дизайнера список макетов будущего сайта или интернет-сервиса и на основе этих макетов создает клиентскую часть сервиса:

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

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

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

    Плюсы и минусы профессии

    • Высокая востребованность.
    • Возможность работать в международных компаниях и проектах.

    Высокие зарплаты у специалистов с опытом работы.

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

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

    Средние зарплаты фронтенд-программистов

    В среднем специалисты с опытом работы могут зарабатывать 70-100 тыс. руб. в месяц, работая в офисе или удаленно. В Москве зарплаты фронтенд-программистов с опытом 3-5 лет достигают 150-200 тыс. руб. в месяц и выше в зависимости от квалификации.

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

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

    Как стать frontend-разработчиком? Что нужно знать и уметь?

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

    1. Освоить HTML и CSS. HTML – это язык разметки веб-документов. CSS – каскадные таблицы стилей. Они управляют оформлением различных элементов на страницах (например, размером шрифтов).
    2. Изучить JavaScript – основной язык программирования, который нужно знать frontend-программисту. Существуют различные библиотеки готовых скриптов (программ), написанных на JavaScript. Их тоже лучше изучить, чтобы пользоваться ими и ускорять свою работу. Пример такой библиотеки – jQuery.
    3. Изучить методологию верстки, например, БЭМ от Яндекса. Методология помогает создавать веб-приложения по определенным принципам, которые помогают разбираться в чужом коде и в своем тоже по прошествии какого-то времени.
    4. Изучить фреймворки, в частности, Bootstrap. Фреймворк – это набор неких готовых решений, на базе которых можно создавать веб-сайты быстрее, чем при написании кода с нуля.
    5. Освоить кроссбраузерную верстку и научиться создавать страницы, которые одинаково выглядят в разных браузерах.
    6. Изучить адаптивный дизайн, т.е. дизайн, который подстраивается под размеры экрана пользователя. Таким образом сайт приемлемо выглядит на разных устройствах (компьютер, планшет, смартфон).
    7. Не лишним будет освоить языки серверного программирования на базовом уровне. Например, язык PHP – один из самых популярных в среде веб.

    Изучить Git и научиться работать с системами контроля версий.

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

    Где обучиться профессии с нуля?


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

    Также обучению front-end технологиям занимается сайт Geekbrains.ru. Учиться профессии можно через Интернет из любой точки мира.

    Где найти работу?

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

    Много хороших вакансий для frontend-разработчиков можно найти на профильных ИТ-ресурсах и сайте hh.ru

    Где найти фронтенд-программиста на проект?

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

    Добавьте проект на биржу в раздел «Разработка сайтов». Здесь можно бесплатно добавить проект или вакансию для frontend-разработчика.

    Сделать портфолио и устроиться на работу по специальности фронтенд-разработчик или верстальщик

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

    Я освоила на очень приличном уровне HTML5, CSS3 и SASS, научилась верстать по методологии БЭМ, изучила jQuery, уверенно пишу несложные программы на базовом JS и штурмую ООП. С DOM тоже разобралась. Весь мой путь можно проследить здесь.

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

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

    Критерий завершения

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

    Выбираем профессию frontend- и backend-разработчика: принципы и отличия

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

    Традиционно эти две сферы разработки разделяют на сцену и закулисье. Во frontend вы работаете на глаза пользователя, в backend же — на его опыт и ощущения. В Skillbox мы учим и frontend, и backend. Остается только выбрать направление своей будущей профессии. А теперь подробнее.

    Что такое
    frontend-разработка?

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

    Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2020 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».

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

    Чтобы наглядно понять frontend-разработку, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щёлкнув правой кнопкой мыши, откроете код страницы в браузере.

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

    Компоненты frontend-разработки

    • HTML (HyperText Markup Language) — язык разметки документов для создания структуры страницы: заголовки, абзацы, списки и так далее.
    • CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Ещё он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом.
    • JavaScript — это язык, который создавался, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

    Что такое
    backend-разработка?

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

    Например, когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или «Яндекса», где расположены алгоритмы поиска. Именно там случается всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend.

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

    Backend — это процесс объединения сервера с пользователем.

    Компоненты backend-разработки

    Backend-разработчик применяет те инструменты, что доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java. Всё зависит от конкретного проекта и задачи заказчика.

    Также для backend-разработки используются системы управления базами данных:

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

    Как взаимодействуют frontend и backend?

    Взаимодействие frontend и backend происходит по кругу:

    • frontend отправляет пользовательскую информацию в backend;
    • информация обрабатывается;
    • и возвращается обратно, приняв понятную форму.

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

    Существует несколько вариантов взаимодействия frontend и backend:

    • HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
    • Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
    • Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
    • Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

    Заключение

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

    10 навыков, которые нужно освоить, чтобы получить работу front-end разработчика

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

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

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

    Быстрый обзор текущих вакансий для front-end разработчиков показывает, что существует четкий набор навыков, которые указывают работодатели. Например, списки требований первых трех вакансий для front-end разработчиков, которые я нашел на Glassdoor.com , во многом идентичны: знания HTML , CSS и Javascript , контроль версий, фреймворки.

    Это термины, с которыми вы познакомитесь, когда начнете изучать front-end разработку. Ниже приводится список 10 основных навыков, необходимых каждому front-end разработчику.

    1. HTML / CSS

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

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

    2. JavaScript / jQuery

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

    Для простых сайтов или веб-страниц достаточно будет HTML/CSS . Но для интерактивных функций ( аудио и видео, игры, прокрутка, анимация страниц ) понадобится JS .

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

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

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

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

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

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

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

    4. Препроцессинг CSS

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

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

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

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

    После написания кода HTML , CSS и программирования на JS front end web developer должен будет произвести ревизию проделанной работы. Если что-то пошло не так, последнее, что вам захочется, это начинать все с начала. Контроль версий — это процесс отслеживания и контроля изменений в исходном коде.

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

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

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

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

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

    Чтобы заставить все работать надлежащим образом, нужно тестировать код на наличие ошибок. Поэтому навыки тестирования и отладки являются обязательными для front-end разработчиков.

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

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

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

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

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

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

    Консоль JS позволяет просматривать ошибки, возникающие при попытке браузера выполнить JS-код .

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

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

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

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

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

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


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

    Не останавливайтесь в совершенствовании своих профессиональных навыков!

    Данная публикация представляет собой перевод статьи « 10 Skills You Need to Land Your First Front End Developer Job » , подготовленной дружной командой проекта Интернет-технологии.ру

    Front-end разработка

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

    Современный developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными , такими как: Twitter, Bootstrap, Foundation 3, Compass.

    Что необходимо знать разработчику:

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

    Вот основные базовые навыки:

      JavaScript

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

    Система управления версиями файлов GIT

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

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

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

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

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

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

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

    1. ssh для подключения к другой машине или серверу
    2. scp для копирования файлов на другую машину или сервер
    3. ack или grep для поиска файлов в проекте по строке или шаблону
    4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
    5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
    6. brew для использования Homebrew для установки пакетов
    7. npm для установки пакетов Node
    8. gem для установки пакетов Ruby

  • Тестирование

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

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

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

    Фронтенд и Бэкенд: На что падет выбор?

    Введение

    Ни для кого не секрет, что веб-разработка является одной из самых востребованных профессий в мире на данный момент. Однако проблема для многих состоит в том, что веб-разработчики делятся на две специализации: Фронтенд и Бэкенд. Какая из них подходит вам лучше всего?

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

    Различные Сферы Влияния: Фронтенд и Бэкенд

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

    Итак, frontend backend разработчики и их обязанности, давайте начинать!

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

    Как Работают Сайты?

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

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

    Затем, вы нажимаете на товар, который вы хотите, открываете страницу товара, нажимаете купить, вводите данные, выбираете способ доставки и вот ваша книга уже в пути.

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

    Какую часть делал Фронтенд и Бэкенд разработчик в этом случае?

    Всё, что вы видите на сайте Amazon было создано фронтенд разработчиками. Кнопки, список товаров, страница товаров, страница оплаты, практически всё.

    Но.

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

    Если вы хотите создать сайт, то это не front end vs back end. Это front end и back end вместе.

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

    День Из Жизни Фронтенд Разработчика

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

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

    Эта компания имеет команды UI/UX дизайнеров, фронтенд и бэкенд разработчиков, а также системных администраторов.

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

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

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

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

    День Из Жизни Бэкенд Разработчика

    Теперь, давайте решим спор “front end vs. back end”, взглянув на него с другой стороны. Ваш день начинается почти так же, и вы отправляетесь на встречу с техническим директором вашей компании.

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

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

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

    Технологии, Которые Вам Нужно Будет Знать

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

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

    Набор Инструментов Front End

    Давайте определим frontend backend инструменты. Хлебом и маслом фронтенд разработчиков являются HTML, CSS и JavaScript. HTML — это гипертекстовый язык разметки, который используется для создания основы сайта. CSS — это способ сказать браузеру, как всё должно выглядеть, стилизуя контент. JavaScript используется для добавления анимаций, переходов и функций для элементов.

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

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

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

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

    Учитывая сказанное, интернет-магазин компании X будет иметь невероятный дизайн, но он может потребовать скриптов, которые должны работать слаженно. В качестве опытного фронтенд разработчика вы должны ценить своё время и использовать библиотеки, вроде React.js и фреймворки, вроде Angular.js только в подходящих случаях.

    Набор Инструментов Back End

    Итак, давайте приступим к следующей части изучения Фронтенд и Бэкенд инструментов. Инструменты фронтенд разработчика обычно довольно популярны. Однако в случае с бэкенд разработчиком всё совсем не так.

    Языки программирования серверной части

    Выбор языков программирования зависит от предпочтений, нужд проекта и ваших знаний. Существует несколько популярных языков программирования серверной части, вроде PHP, JavaScript (используемых в среде Node.js с фреймворком Express), Python, Ruby, C#, Java и другие.

    Используемые технологии также могут определить язык, которые вы собираетесь использовать. Например, если ваш сайт создан на Symfony или Laravel, то вам придётся использовать PHP. Для фреймворка Django более предпочтительным станет Python, тогда как работа с фреймворком Express потребует от вас знаний Node.js.

    База данных

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

    Существует несколько популярных систем баз данных, вроде MongoDB, MySQL, Oracle, Redis и другие.

    Итак, front end и back end инструменты мы рассмотрели, давайте перейдём к следующей теме.

    Разная Специализация Для Различных Интересов

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

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

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

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

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

    Возможно, сейчас вы подумали, что бэкенд гораздо важнее, да?

    Однако это вовсе не так. Эти две специализации равны, хотя требует различных наборов навыков и знаний.

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

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

    Какая Зарплата у Веб-Разработчика?

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

    Давайте взглянем на цифры и подведём некий итог в споре “front end vs back end”, что позволит вам принять взвешенное решение. Эти данные будут представлены в качестве сравнения.

    Зарплата Фронтенд

    По данным glassdoor.com средняя зарплата фронтенд разработчика в городе Нью Йорк равна $111,728, что на 20% выше чем национальный уровень по стране. Это может быть объяснено тем, что крупные города имеют высокие расходы на проживания и более развитую экосистему бизнеса.

    В Лондоне, Великобритания, средняя годовая зарплата для фронтенд разработчика составляет около $52,000, что 22% выше национального среднего уровня, по данным glassdoor.com. Как вы заметили, зарплата серьёзно отличается, но общий уровень относительно других зарплат в стране остаётся практически таким же.

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

    Зарплата Бэкенд

    В Нью Йорке средняя зарплата бэкенд разработчика будет равна $133,182, что на 17% выше национального среднего уровня зарплат. Как вы наверное заметили, то разнится с другими странами и города также высока.

    В Лондоне средняя зарплата бэкенд разработчика является уже более высокой и равна $74,000, на 32% выше средней. В Индии фронтенд и бэкенд разработчики получают одинаковую заработную плату.

    Вердикт

    Если дело касается зарплаты, то front end и back end разработчики не сильно разнятся, но бэкенд специалист может рассчитывать на большее.

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

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

    Заключение

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

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

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

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

  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих