20 рабочих советов от Junior Front-end developer


Оглавление (нажмите, чтобы открыть):

Что ожидать от собеседования на должность HMTL-верстальщик/Junior front-end.

Вёрстка

Какие бывают значения display? Расскажите как ведёт себя каждое свойство
Что вы знаете о весе селекторов? Каковы значения веса?
Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство
Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
Что такое float?
Что такое clearfix? Из чего он состоит и для чего он?
Из чего строится размер элемента?
Что такое border-box?
Расскажите о различиях padding и margin?
Как ведут себя margin у двух элементов по соседству?
Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
Есть ли у тегов предопределённые стили?
Как повлиять на вертикальное выравнивание строчного элемента?
Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?
Чем отличается article от section?
Какие вы знаете псевдоэлементы? Приведите пример использования
Как отцентровать элемент по горизонтали не зная ширину родительского блока?
Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
Что такое “резиновая” вёрстка?
Какие бывают значения у свойства background-size? Расскажите о каждом из них
Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
Как сделать мобильную, планшетную и десктопную версию сайта?
Что такое ретинизация?
Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как?
Как можно задавать размеры картинкам?

Расскажите об особенностях вёрстки писем
Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте
Пользовались ли вы какими-то инструментами для тестирования писем?

Как браузер “читает” css?
Какие свойства браузеру отрисовать тяжелее всего?
При изменении каких свойств браузер затратит больше всего ресурсов и почему?
Что такое инлайновые стили?
Инлайновые стили “сильнее” стилей в обычном файле css?
Что такое наследование стилей?
Что вы знаете об !important?
Что такое размер viewport?
Вертикальный скролл входит в размер viewport?
Какой размер вертикального скролла?
Как проверить кроссбраузерность вёрстки?
Что такое DOM?
Какие вы знаете способы подключения шрифтов к странице?

Какие вы знаете способы организации css кода?
Что вы знаете о БЭМ?
Что вы знаете о SMACSS?

Препроцессоры и сборка

Какие из инструментов сборки вам знакомы?
Что лучше Gulp или Grunt?
Как происходит “сборка” проекта в Gulp и Grunt?
Какие из препроцессоров вы знаете? В чём их различия?
Что лучше Less, SCSS или PostCSS?

Вы знакомы с Google Pagespeed?
Что такое gracefull degradation?
Как проверить html-код на валидность?
Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap?

Что такое SVG?
Что такое иконочные шрифты? Где их искать и как подключать?
Что лучше, делать иконки через SVG или через иконочные шрифты?
Какие есть способы вставки SVG в HTML? В чём между ними разница?
Как мы можем взаимодействовать с SVG?

20 рабочих советов от Junior Front-end developer

Заметка о том, что должен знать и уметь специалист в 2020 на позицию Junior Frontend Developer

Решил написать эту заметку, так как встретился с проблемой поиска джуна в штат (кстати, если ты джун и ищешь работу кидай мне резюме в личку или пиши в телеграмм @frolovandrei). Мы столкнулись с 2 проблемами: большинство верстальщиков по какой-то неизвестной причине ассоциируют себя с frontend разработчиками и довольно большой голодняк на хороших джунов (наверно, в принципе есть голодняк на просто соображающих людей, но это не точно).

Основным триггером для написания статьи послужило взятие джуна, который закончил курсы Loft School по Vue (простите не знаю, как точно называется курс). Сейчас будет маленький камень в огород Loft School, верстать у человека получилось под реакт, стайлед компоненты освоил, да только дошли мы до написания простейшей логики через пару дней. Кейс был в следующем, get запрос с сервера, промапить полученный массив объектов и вывести таблицу. И доку реакта ему дал с примером, и пример со стаковерфлоу подкинул, так как вижу, что не понимает. Сели разбираться через n-дней, написал ему решение, смотрит на меня пустыми глазами, объясняю на пальцах, не понимает, уволили (кажется, очередные курсы формата вечерних видосов под пиво).

Так как интернет наполнен сейчас огромным количеством постов, курсов, статей о том, как стать frontend developer’ом, я решил внести свой маленький вклад в эту тему, так как не так давно сам бегал по собесам и успешно с ними справлялся. Сам понимаю, насколько сложно в самом начале разобраться, что учить. Тем более, спрашивая в чатах (а спрашивают часто), есть вероятность попасть на персонажа НастоящийПрограммист, он вам предложит для начала разобраться в логическом моделировании схем на примере верилога, затем немножко позаниматься ассемблером, приправить всё это c++, и вот тогда смотреть в сторону js.

Я рассматриваю кейс, что человек хочет работать на проекте с React’ом. Тут будет чеклист, он подразумевает, что вы должны либо это знать, либо уметь быстро найти с помощью любых ресурсов. Бывает и такое, что человек пишет что-то на React’е, но не понимает почему onPress= <() =>kaka9toFunci9()> работает, а onPress= <() =>kaka9toFunci9> нет (это реальный случай). Потому будет очень много банальных и простых вещей, так как действительно много соискателей не понимают самых базовых вещей.

  1. Что такое функция и её аргументы;
  2. Анонимные функции;
  3. Понимание this и замыканий.

Основные структуры данных:

  1. Объекты;
  2. Массивы, их основные методы (filter, map, reduce).
  1. Понимание что из себя представляет dom дерево.
  1. Хотя бы понимание, что делает addEventListener и что в него можно передавать.

Современные стандарты языка:

  1. Деструктуризация;
  2. Spread оператор;
  3. Промисы, цепочки промисов. (then и Async/await);
  4. Запросы в сеть, fetch().

Студия готового дизайна GS studio

Login

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

Михаил Стадник, Senior JavaScript Engineer, 16 лет опыта во Front-end/JS:

Первое и самое важное — быть фанатом своего дела. Если этого нет, зачем себя обманывать, займитесь тем, что вам по душе. На самом деле зарабатывать можно не меньше (а может и больше) и в других сферах. Работа разработчика — это постоянное обучение. Ежедневное. И это должен быть осознанный выбор. Со временем вы обнаружите, что знания, которые были актуальны 15 лет назад, вдруг оказались устаревшими и никому не нужными. Действительно, кому какое дело в 2020 году, какие особенности были у рендеринга таблиц в IE6? А ведь когда-то об этом могли и на собеседовании спросить.

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

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

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

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

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

Поэтому изучайте шаблоны проектирования. Все наши любимые фреймворки, в большинстве своем — это набор реализаций тех или иных шаблонов. Например, для ООП-парадигмы много шаблонов описал и систематизировал Мартин Фаулер. Тем не менее JavaScript мультипарадигмальный язык, поэтому не зацикливайтесь на ООП, изучите принципы функционального, императивного/декларативного и основанного на прототипах программирования. Изучайте, что такое неблокируемый ввод-вывод и асинхронность, событийно-ориентированное, аспектно-ориентированное программирование и так далее (информацию, благо, сейчас найти не составляет труда). Особое внимание уделите пониманию базовых принципов функционирования языка, с которым вы работаете. Протоколы и стандарты, которые связаны с ним и со средой окружения, в которой выполняется ваша программа. Разберитесь, что такое многопоточность и однопоточность, чем потоки отличаются от процессов. В конце концов, опуститесь до низких уровней и разберитесь, как работает эта чертова железяка, которая стоит перед вами на столе и которую называют компьютером. Попробуйте, например, достоверно разобраться, что физически происходит в машине, когда вы объявляете в коде переменную и присваиваете ей какое-то значение. Через сколько и какие программные и аппаратные слои пройдет этот процесс? И помните: «There is no silver bullet».

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

Ведь мир очень динамичен. Вы не успели еще досконально изучить все тонкости работы Angular 1, а где-то кто-то уже пишет на Angular 5. Мой личный опыт говорит о том, что в самом начале выгодно инвестировать своё время в фундаментальные знания, так как всё остальное — приходит и уходит.

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

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

Сергей Россоха, Software Architect, 11 лет опыта во Front-end/JS:

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

Руководствуясь принципом: «полезность книги обратно пропорциональна её толщине», я не буду рекомендовать труды Д. Кнута, вместо этого быстрее и полезнее начать со статьи структур данных, о которых стоит знать программисту». Здесь описаны основные структуры данных и алгоритмы работы с ними. Для тех из вас, кто хочет более детально ознакомиться с алгоритмами и структурами данных, я рекомендую книгу Н. Вирт «Алгоритмы и структуры данных», ее достаточно легко найти в Google или купить в книжном магазине. Я бы рекомендовал реализовывать в коде каждый алгоритм из этой книги, это поможет набить руку в написании кода, а заодно поможет лучше запомнить особенности реализации алгоритмов на JS. Как вариант, можно написать собственную библиотеку с реализацией алгоритмов, описанных в книге.

JS экосистема развивается очень динамично. Новые библиотеки и фреймворки появляются чуть ли не каждые полгода. И перед начинающими JS-разработчиками стоит нелегкий выбор, какой из них стоит учить. Мой ответ достаточно прост — учите JavaScript. В этом вам поможет серия книг YDKJ, тем более она доступна на GitHub. Для любителей настоящих книг доступна также и бумажная версия. Не стоит забывать и о всеми любимом Mozilla Development Network (MDN) — это отличный справочник, в который можно подсмотреть, если что-то забыли 😉

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

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

Александр Смолянинов, Front-end Tech Lead, более лет опыта во Front-end/JS:

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

Поэтому в первых двух советах хотелось бы поговорить о верстке и JS.

Не отодвигайте верстку на второй план

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

Не забывайте о нативном JS

Если раньше мы сталкивались с поколением «jQuery-программистов», не умеющих обращаться с ванильным JavaScript, то сейчас все чаще встречаются молодые разработчики, взращенные на модном JS-фреймворке и не способные написать простейший алгоритм на чистом JS, иногда практически не владеющие версткой. Не надо так. Хорошие знания языка позволят намного быстрее понять любой новый фреймворк на нем. И да, штудируя проверенные временем книги по JS, не забывайте о ES2015.

Одновременно и простой, и сложный вопрос, где же этой базой овладевать. Кому-то проще штудировать книги, кому-то ходить на офлайн-курсы, кому-то заниматься онлайн. Несмотря на то, что курсы фронтенда — одни из самых популярных среди всех айтишных, там не всегда высокий уровень преподавания из-за низкого порога вхождения. Лично мне видится идеальным сочетанием — проверенные онлайн-курсы + ментор, к которому всегда можно обратиться с вопросом. Если проблемы с английским языком, то можно попробовать свои силы на ITVDN, Loftschool, HTML Academy или Hexlet. Среди англоязычных неплохо себя показали freeCodeCamp, udemy, Code School и codecademy. Ментора же лучше искать по рекомендациям, личному отношению и в офлайн-доступности. Однако слишком увлекаться курсами тоже не стоит, чем раньше вы перейдете к реальным задачам, тем лучше.

Старайтесь всегда быть в теме

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

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

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

Каналов для мониторинга на сегодняшний день более чем достаточно: это и вышеупомянутый дайджест, и RSS/Twitter лента с подпиской на тематические (микро)блоги, и периодические почтовые рассылки, и агрегаторы ссылок типа echojs.com, frontendfront.com или heydesigner.com. Для любителей соцсетей есть reddit.com/r/Frontend, hashnode.com и medium.com (с фильтрацией по нужному тегу), паблики и каналы в slack или telegram. Также нельзя забывать о подкастах, которые последнее время растут как грибы — Веб-стандарты, Frontend Weekend, Пятиминутка React, Пятиминутка Angular, Фронтёрки, devschacht и многие другие.

Проактивность

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

Сделали сайт с перспективой будущей поддержки или в процессе работы над крупным проектом? Добавьте стайлгайд и облегчите жизнь всем разработчикам на проекте. Закончили верстку быстрее, чем планировали? Добавьте хотя бы базовую поддержку accessibility, проверьте стили для печати и убедитесь, что анимация работает со скоростью 60 FPS. Осваивайте и предлагайте добавить поддержку offline, оцените возможность создания PWA и поборитесь за 100 баллов в google page speed.

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

Ответственность

Последний, но, наверное, самый важный совет. Можно идеально освоить любую технологию, стать богом CSS, JavaScript ниндзя и быть крутым спецом в Angular и React. Но если вы не попадаете в свои же естимейты, регулярно срываете сроки, подставляя всю команду, не сигнализируете вовремя о проблемах на проекте, исчезаете с рабочего места без объяснений, убегаете на условную тренировку во время критической ситуации на проекте и тому подобное — то в таких ситуациях ценность ваших знаний будет стремительно катиться к нулю. К сожалению, дежурный набор слов в конце каждого второго резюме (про ответственность, усидчивость и стрессоустойчивость) на деле оказывается просто набором слов, а найти по-настоящему ответственного и надежного специалиста — тот еще квест.


Роман Савицький, Team Lead, Senior Software Engineer, 6 років досвіду у Front-end/JS:

Напевно, я не буду розпочинати з того, як «увійти в ІТ», адже занадто багато статей на цю тему. В ІТ увійти можливо, головне розуміти, що таке ІТ. Я працюю зі студентами і випускниками ВНЗ, і деякі з найбільш активних отримують роботу у свої 18. З чого ж почати у фронтенді?

Основи

Розпочинати потрібно з основ програмування і мови, якою ви хочете займатись. Фронтенд розробку я пропоную вивчати з основ HTML5, а саме семантики. Насправді, у мене погані новини тим, хто починає з ToDo List React і вважає, що семантика відійшла в минуле, і все, що зверстано div елементами, — це чудово. Розуміння різниці між b та strong залишиться на все життя, і саме цією базою ви будете користуватись щодня.

Також вивчайте CSS, до того ж послідовно. Починати з bootstrap не раджу, краще чистий CSS. Завжди вважав помилкою, коли розробники не розуміють одиниць вимірювання, підбирають все навмання. Розповім про цікавий випадок на співбесіді одного новачка на вакансію трейні. Розпочали ми, як завжди, із запитань невеликої складності для розуміння рівня. Усе наче добре, і дійшли до CSS. Отримали позитивні відповіді на рахунок flex, box моделі й інші. Коли ж запитали на рахунок одиниць вимірювань, отримали відповідь: «Є пікселі, навіщо ще щось». В очах виник подив і сумнів на рахунок знань. Цікавим відкриттям співбесіди стало те, що, чим простіше було запитання, тим гірша була відповідь.

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

Вивчайте спочатку основи, а далі набирайте оберти і додавайте технології.

Найкращою мовою програмування на фронті був і залишається JavaScript. Розпочинайте з нього, а далі можна CoffeeScript, TypeScript й інші. Але головне, розпочинайте з останнього стандарту, не намагайтесь вивчити старий стандарт, якому 10 років, і думати, що, можливо, знадобиться на старих проектах. У такому разі будете завжди доганяти поїзд.

Ментор

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

Курси

Ну якщо ж ви не знайшли ментора і немає змоги стати трейні в одній з компаній, тоді віддайте перевагу курсам. Якщо мову вести про офлайн, то віддавайте перевагу тренінгам при компаніях: саме їм цікаво якісно навчити вас і запросити на роботу. Це те, що потрібно молодому спеціалісту. Платні офлайн-курси, які побудовані на комерційній основі, я не раджу, тому що зацікавленості у менторів немає (тільки грошова), і вона не залежить від ваших результатів. Добре, якщо ви дістанете хоч якусь інформацію, а здебільшого youtube канал допоможе більше.

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

Англійська

Тут все просто: не володієте англійською, навряд чи зможеш програмувати. Уся актуальна інформація англійською, ресурси українською та іншими мовами перекладають із запізненням, якщо взагалі перекладають. Та й мови програмування, у цілому, «англомовні».

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

Практика

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

Вивчаєте створення макетів і HTML, обов’язково скачайте макет і зверстайте його. Без практики неможливо увійти в ІТ. Будете проходити курсів — і розвитку ніякого не буде.

Коли на практиці виконаєте декілька завдань, тоді спробуйте визначити напрямок фронтенду, у якому хочете розвиватись, — і вперед.

Ресурси

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

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

Далі, напевно, W3Schools, MDN web docs, HTML5 Rocks — це набір довідників, які оновлюються гарно і де завжди можна знайти актуальну інформацію.

На рахунок онлайн-відеоконтенту, тут раджу ютуб з різноманітними каналами, cousera, udemy, codeschool.

Наостанок додам, що головне мати бажання, вибрати напрямок і активно розвиватись в ньому, завжди виконуйте роботу, яку пропонують, практика допоможе вам — і з часом отримаєте все кращі і кращі задачі. Не хвилюйтеся, коли робите помилки, наступного разу вийде краще. Який критерій того, що ви можете працювати і боротись за позицію junior для мене? Коли декілька рандомних практичних задач ви можете виконати різними способами і розумієте різницю між ними, переваги кожного. Це перша ознака готовності до роботи у фронтенді.

Тимофей Лавренюк, Full Stack Engineer, 6 лет опыта во Front-end/JS:

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

0. English

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

0. Computer Science

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

Если хочется быть хорошим разработчиком и не зацикливаться в будущем только на Front-end, то нужно понимать:

  • как работает ЭВМ;
  • как работает Сеть и Интернет;
  • базовые алгоритмы и структуры данных;
  • устройство браузера.

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

1. Верстка

Конечно, сейчас хочется выучить React или Angular, взять Bootstrap и сразу делать веб-приложения. Но нужно помнить, что веб начинался не с них. В первую очередь желательно выучить HTML и CSS и сверстать пару десятков сайтов. Нужна практика, чтобы понять, как работает верстка блоками, flex-aми или даже таблицами, и где какой layout нужно применять. Постепенно можно освоить сетки, верстку под различные экраны и препроцессоры.

2. JavaScript

Если CS для вас немаловажно, то лучше сначала изучить язык С, а после него взяться за изучения основного языка для Front-end разработки. А именно JavaScript-a по спецификации ES5. Надо понять, что умеет этот язык, как реализовать на нем базовые алгоритмы и паттерны, и потом уже есть смысл посмотреть на его эволюцию в виде ES2015 или TypeScript. Для изучения базового JavaScript я бы посоветовал серию уроков JavaScript Road Trip на CodeSchool. Это может показаться скучно и бессмысленно поначалу. Поэтому нужно не затягивать и браться за следующий пункт. Но не стоит забывать, что нужно стремиться учить JavaScript всегда, постепенно познавая тонкости языка и его Best Practices. В этом может помочь ресурс learn.javascript.ru

3. Frameworks

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

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

4. Работа

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

Поэтому если хочется расти не только в $ плане, я бы рекомендовал не останавливаться учиться. А чтобы изучать глубже верстку, JavaScript, фреймворки и различные новые технологии — можно параллельно создавать свои pet-проекты. Решение реальных проблем, которые действительно что-то значат для тебя — это лучший путь к становлению хорошего разработчика. А если получится выпустить свой проект в production и поддерживать его, то это 2x boost опыта. Проверено на личном опыте и проекте.

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

Влад Лукьянов, Senior Software Engineer, 5 лет опыта во Front-end/JS:

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

Что касается технических навыков, сейчас ценится знание ReactJS и Redux, но важно понимать, что это самый сложный стек за всю историю Front-end разработки, поэтому если у вас что-то не будет получаться либо что-то непонятно, не стоит расстраиваться. Я бы не стал смотреть в какой-то большой проект, где используется React, Redux, Immutable, RxJS и еще много чего, а учить все поэтапно. Конечно же, нужно начинать с самых основ, понимание цикла жизни компонентов (например, в чем отличие componentDidMount от componentWillMount), что такое state, props, какое между ними отличие и когда нужно использовать одно либо другое, как работают events в React. Есть замечательная библиотека, которая позволяет сразу писать React код без каких-либо настроек npm, webpack, babel и прочего, — это create-react-app, однозначно это сэкономит массу времени.

Список тестовых заданий от подписчиков #1

В vk получил следующее предложение:

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

Не вопрос! В конце каждого ТЗ краткий комментарий от редакции.

Если вам есть о чем рассказать — пишите в vk/telegram. Так же у мы проводим разборы тестовых заданий.

Задания с собеседования Web-программист/верстальщик

Задачи:

  • верстка сайта по макетам;
  • поддержка существующих сайтов;
  • интеграция сайтов на платформы UMI, WordPress.

опыт работы верстальщиком, web-разработчиком от 1 года;

  • HTML5, CSS3, Адаптивная кроссбраузерная верстка;
  • JavaScript, jQuery, AJAX;
  • желательно знание PHP и XSLT (возможно обучение);
  • базовые знания Photoshop для работы с готовыми макетами;
  • общие знания предмета: клиент-сервер, понимание ООП.

  • Общение перед заданием:

    Сначала общение с HR общие вопросы о прошлом месте работы, что разрабатывали, с чем работали и причина ухода

    Потом общение с лидом вопросы про общие вопросы про верстку (про способы центрования, позиционирование). Вопросы про CMS(с какими и как работал), немного Javascript

    Задание

    • Сверстать макет
    • В шапке сайта изображение заполняет весь блок и располагается по центру.
    • Контент страницы может быть от 1 до 1000 строк.
    • Количество пунктов и подпунктов правого меню может варьироваться в диапазоне от 1 до 10.
    • Эффект для разворачивания подменю выбирается самостоятельно.
    • Боковое меню является фиксированным при прокрутке до тех пор, пока блок соцсетей не оказывается на расстоянии 50 пикселей от футера. При этом следует учитывать различные размеры меню, контента и экрана.

    От редакции «Без воды»:

    Адекватное задание для требуемой позиции. Стандартная задача, разумные временные затраты

    Тестовое задание из вакансии junior front-end developer

    Требования к разработчику

    • HTML5/CSS/LESS/SASS/SCSS
    • Работа со сборщиками GULP/WEBPACK
    • Базовые навыки Javascript/ES5/ES6

    Общение перед заданием:

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

    Задачи

    Создать компонент для отображения таблицы с данными (Таблица с фейковыми данными из JSON’a, данные любого вида)

    • Получить данные с backend’a и вывести полученные данные в табличку, описание запросов было предоставлено.
    • Кнопка добавления новой записи
    • Запись посылаем на бэкэнд
    • Кнопка удаления записи напротив каждой строки таблицы, по клику запись удаляется запросом на бэкэнде, по успеху — на фронтэнде удаляется
    • Кнопка редактирования напротив каждой строки таблицы
      • По клику на нее, в таблице все инпуты становятся редактируемыми и на месте кнопки редактировать, появляется кнопка сохранить
      • По нажатию на сохранить, отправляется запрос на бэкэнд, по успеху — инпуты опять становятся ридонли и кнопка меняется на «редактировать».

    Задания с собеседования HTML-верстальщик

    Задачи:

    • Адаптивная блочная верстка страниц pixel perfect (мобильные устройства, десктоп)
    • Табличная вёрстка писем
  • HTML5 (tags)
  • CSS3 (flexbox, grid layout, media queries, pixel ratio, etc …)
  • Markdown
  • Stylus
  • SVG fonts
  • Gulp
  • Git
  • NPM (Yarn)
  • опыт вёрстки под мобильные устройства.
  • Общение перед заданием:

    Вопросы про то с какими сборщиками работал, как происходит отрисовка сайта(введение имени, запрос, отрисовка документа),какие навыки JS имеются. Как происходила работа совместно с дизайнером.

    На выбор давалось одно из трех заданий

    Задание 1

    Вариант №1:

    Нужно выводить текстовые сообщения в html блок (общий вид приведён в приложенном файле «messages.jpg»).

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

    Блок 2 — отображает полный список сообщений, удалённые сообщения помечены знаком «х», новые сообщения добавляются в конец списка.

    Блок 3 и 4 для отправки сообщений и включения в очередь для показа.

    Вариант №2 (для усложнения):

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

    Не функциональные требования:

    • Разрешено использовать js фреймворки
    • Желательно, чтобы html был максимально чист (минимум вёрстки, скриптов в html)
    • Кроссбраузерная вёрстка, в т.ч. для мобильных устройств.

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

    Задание 2

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

    Для отображения график можно использовать сторонний компонент, например
    http://www.highcharts.com/demo/ или любой другой.

    Вёрстка должна быть адаптированной с поддержкой мобильных устройств (на одном из изображений есть пример). Должна быть возможность скрывать некоторые строки из таблицы (например удалением через настройки).

    Нужно в html+js (можно использовать фреймворки) сверстать. Данные для таблицы и графика нужно хранить в json-файле. Бэкенд вообще не нужен.

    Задание 3

    Нужно сверстать расписание работы сотрудников. На графике отображено плановое время работы сотрудника (закрашенные прямоугольники) и фактическое (закрашено штриховкой). На вход приходит 2 набора данных в json формате, которые содержат 2 набора строк. На выходе ожидаем: html страницу + js + css + json-файл с данными. БД & бэкэнд не требуются. В json-файле должны быть данные с приложенной картинки.

    Вариант №1. Облегченная задача (минимум):

    • Отобразить план работы всех сотрудников;
    • В диапазоне дат ограничиваем принудительно максимальную длительность – 4 дня;
    • У одного сотрудника может быть несколько смен в выбранном фильтре дат в одном ресторане (как у Гоку Петра), нужно отобразить оба отрезка в одной строке, как на приложенной картинке;
    • При щелчке на смене сотрудника отображать плановую длительность этой смены.

    Вариант №2. Задача нормальной сложности:

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

    Важно:

    Перед выполнением оцените время на выполнение задания, выберите вариант (1 или 2) и дату выполнения задания.

    Задание 1/2 неплохо. Задание 3 уже сложновато.


    Задания с собеседования на Frontend разработчика

    Веб-приложение для проведения тестирования (es5)

    Требования:

    • Хорошее знание Javascript, css, html
    • Знание любого UI framework (React/Redux, Vue, Angular and etc.). Мы работаем с React/Redux
    • Желательно знание webpack, TypeScript, SASS (SCSS)

    Общение перед заданием:
    Общие вопросы про верстку, алгоритмы и базовые понятия js/react , в чем фишка реакт, взаимодействие между родителем/потомком. Несколько вопросов про es5/es6 зачем были созданы, какие преимущества дают

    Написать веб-приложение для проведения тестирования.

    • Вид начального экрана — название теста, кнопка запуска.
    • Вид экрана вопроса — текст вопроса, варианты ответов, кнопка «Продолжить».
    • Вид экрана результата — текст «Ваши баллы:», и кнопка «Пройти еще раз»

    Back-end: создать базу данных с помощью Entity Framework подходом Code First, в которой
    будут храниться вопросы тестирования. Заполнить БД данными из скрипта (приложен к заданию).

    Сервис должен реализовывать интерфейс ITestService из диаграммы классов.

      Метод TestInit случайным образом выбирает N вопросов из БД и сохраняет в сессии. Возвращает количество вопросов N.

    Метод GetNext возвращает данные вопроса из списка(п.1) по индексу(берется из тела запроса)

    Front-end: в соответствии с диаграммой классов на js реализовать объектную модель приложения.

    Для разработки логики руководствоваться UML диаграммой.

    testController — основной класс для управления процессом тестирования.

    question — общий класс(родитель) для объекта вопроса.

    radioQuestion — класс потомок question для вопросов с одним правильным вариантом ответа.

    checkboxQuestion — класс потомок question для вопросов с несколькими правильными вариантами ответов.

    • Поле Text — текст вопроса в формате Base64.
    • Поле Options — варианты ответов в формате Base64 с разделителем «#;» пример(base64#;base64).
    • Поле Answers — правильные ответы, в формате как в поле Options.
    • Поле TimeOut — необязательное, время для ответа на вопрос в секундах.

    Доп.Задание(необязательное): реализовать таймер для вопросов, у которых в поле Timeout !== null

    Веб-приложение для проведения тестирования (es6)

    Тоже самое, что и выше, но с дополнениями:

    Для выполнения задания необходимо настроить webpack (версии 2, 3 или 4) для работы с кодом ES6+ используя babel-polyfill и babel-loader c пресетами env и stage-3.

    Пояснения по заданию:

    В задании идет основной упор на синтаксис ES6+ и новые возможности языка, а именно:
    1. Новый синтаксис классов
    2. Промисы (Promises)
    3. Генераторы и итераторы (включая их асинхронные варианты)
    4. Коллекции Map и WeakMap

    Перед выполнением задания рекомендую ознакомиться с книгой «ECMASrcipt для разработчиков» (автор Николас Закас).

    Для реализации методов загрузки данных (прим. ajaxToService) использовать API Fetch, организовать перехват ошибок.

    Наследование использовать с новым синтаксисом, обязательно использование ключевого слова super.

    Приватные переменные реализовать с использованием WeakMap (посмотреть в книге как это делается)

    Пояснения по классам:

    TestController — класс синглтон. Содержит асинхронную функцию init, которая запускает тест через асинхронный итератор, который получает из функции questionGenerator.

    Функция questionGenerator представляет собой асинхронный генератор.
    Метод questionFactory создает экземпляр дочернего класса для Question и возвращает его.

    Подробнее по асинхронным итераторам:
    https://github.com/tc39/proposal-async-iteration

    Задание определенно «Борщ». Большое, сложное, зачем такое давать на тестовое? Да еще и для такой позиции.

    Junior Web Developer или что нужно знать для устройства на работу. Часть Пятая.

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

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

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

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

    До начала собеседования

    И так, резюме оформлено, уже идут первые звонки или письма на email, skype. Первое что нужно будет узнать — название компании, где географически находятся и в сколько этапов будет проходить собеседование. Сейчас объясню. В более мелких фирмах собеседование происходит в один этап, там зададут ряд вопросов, возможно подкинут небольшую задачку и дадут ответ. В более крупных фирмах, сначала придется пообщаться с HR(Human Recruiter), который составит общее представление о вас и примет решение подходители вы данной фирме или нет. Далее могут быть тесты, по которым определят в какой отдел вас направить, а далее собеседование с тимлидом или командой данного отдела.

    Внимание важный момент

    Если вам вдруг сходу по телефонному разговору, эмейлу или скайпу предлагают сделать тестовое задание, то на эту фирму можно смело забивать. Т.е. что я имею ввиду. Собеседования как такового не было, а вам уже предлагают сделать тестовое задание, при чем ни где находиться фирма, ни с чем она работает вы не знаете, да и вас и вы никого в глаза не видели. А тут сходу тестовое(пример кода) задание и жди у моря погоды. Они так даже midl’ов и senior’ов пытаются развести. А некоторые даже и не пытаются скрыть что данное «тестовое задание», кусок таска из реального проекта за который платят деньги(но не вам).Еще можно сделать так. Сказать что готовы выполнить тестовое задание и вывесить пример на каком нибудь бесплатном хостинге, где они смогут его посмотреть и протестировать на безопасность. Если понравиться то придете с ноутбуком/флешкой и покажите код. Как показывает практика обычно не соглашаются и просят прислать готовый код.

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

    > Как поставить красный цвет текста какой либо ячейки таблицы.

    Не верный вариант, сразу говорить «color:red» или «color:#f00».

    Верный вариант:
    «Откуда берется эта таблица?», «Данная таблица генерируется средствами php или получена ajax?», «Какой именно ячейке нужно задать данный цвет?»

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

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

    >Имеется строка типа «Hello World», нужно вывести ее в обратном порядке(«dlroW olleH») не используя встроенные средства php(типа explode()).

    Даю подсказку. В php со строкой можно работать как с обычным массивом.

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

    Далее, по окончанию собеседования вам скажут стандартную фразу «Мы вам позвоним и сообщим бла-бла». В общем, если сразу или в течении двух суток не дали ответа, можем смело забивать на данную фирму. В лучшем случае позвонят недельки так через три, пока послушают еще n-кандидатов или вообще не позвонят. Если вы очень сильно заинтересовали фирму, то ответ будет дан в кратчайшие сроки, а именно в первые двое суток. В общем не заморачиваемся а смело идем в следующую.

    Какие вопросы нужно задавать на собеседовании

    Если спрашивают «Есть ли у вас к нам вопросы?», да есть.

    1) Нужно поинтересоваться о графике работы. Во сколько приходить — уходить, сколько времени перерыв. Некоторые говорят что можно приходить с 9-11 часов отрабатывать 8 часов и 1 час перерыв. Некоторые более строже типа в 9 на рабочем месте в час дня перерыв.

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

    3) Если не рассказали про трудоустройство, стоит уточнить. Варианты: трудовой договор официально, ЧП. Если официально, то в принципе проблем нет. А вот ЧП, это множество подводных камне. Мой совет, пока у вас нет собственного бизнеса, не стоит открывать ЧП, т.к. там есть свои подводные камни и куча бумажно волокиты. И закрывать ЧП будет довольно проблематично. Да, могут сказать что у них есть свои бухгалтера, но при ошибке ихнего бухгалтера ответственность перед налоговой будете нести вы. По этому много раз подумайте что бы идти на этот риск. Но что же делать если фирма заинтересовала, но там нужно оформлять ЧП? Очень просто, идете по методу «джентльменского соглашения» или перевода на личную карточку. Да это риск, но в случае если вас уволят, то не нужно будет ходить и доказывать что вы не верблюд в налоговую или того хуже закрывать ЧП за ненадобностью

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

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

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

    Советы по выбору фирмы

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

    2) Работа в разных направлениях. А именно, с чем большим количеством CMS, Frameworks, и ЯП работает фирма, тем лучше. Вам на этом этапе очень важно развитие, а если будет возможность развиваться не только в PHP, а еще например в c# с мудрым наставником под рукой, то это несомненно плюс.

    3) Если фирма работает со своим framework’ом(я, и не только, называю их велосипедами). Да именно велосипедами, потому как в большинстве случаев это так и есть. Опять же повторяю, что вам на этом этапе нужно развитие. А если фирма занимается построением сайтов только на своем фрейме, да еще и хочет подсадить вас под него, то лучше сразу отказаться. Поскольку на выходе, да вы поднимете скилл разработки на PHP возможно JS и CSS, но при смене работы может оказаться, что то на чем вы работали никого кроме предыдущей фирмы не интересует, а делать все тоже самое можно легче и проще. Выбор за вами


    4) Тоже качается и фирм которые работают только с одной CMS. Но тут нюанс, если эта CMS востребована, то можно поработать и поднять скилл. Например Magenta считается одной из самых сложных CMS, а написав в резюме опыт работы с данной системой, будет в разы легче получить должность в разработке e-comers приложений.

    5) Если фирма занимается framework’ами типа zend, simfony, cakephp, yii. А проще говоря, популярными, то скорее всего не брезгует и популярными CMS. Однозначно стоит идти, т.к. в данной фирме вы наберетесь намного больше опыта(ну или быстрее), чем в фирме которая занимается только чем-то определенным, например WP.

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

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

    Junior Front-end Developer

    DB2 Limited is looking for a Junior Front-end developer for full-time position in Kiev, Ukraine.

    DB2 it’s outsourcing development company that builds great web and mobile applications, using the latest technologies.

    We are working with startups, established business from the United States, United Kingdom, Australia and Central Europe in different industries.

    We build a complex solution which help our client becoming the best leaders in their markets.

    We offer:

    Working in a unique company with interesting tasks in a team of highly professionals

    Working hours: Mon-Fri, from 9:00 till 18:00 (flexible schedule, working on client time zone)

    The office is located 7 walking minutes from metro stations Beresteiska

    Junior Front-end Developer

    За 16 лет существования Scada успела поработать с самыми разными компаниями: с крупными банками и компаниями из киберспрорта, с телекоммуникационными холдингами и молодыми бойкими стартапами. У нас нет рутины: каждый проект не похож на предыдущий.

    Scada сотрудничала с МТС, Промсвязьбанком, Accenture, Elko, Telia и Epicenter — у нас всегда есть, что положить в портфолио.

    Что надо делать:

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

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

    Кого мы ищем

    Чтобы мы сработались, надо строго соблюдать дедлайны, быть инициативным и стремиться красивым решениям.

    А чтобы справляться с нашими задачами, пригодится вот это:

    • Опыт в разработке вэб-приложений от 1 года
    • Понимание принципов адаптивной и кроссбраузерной верстки
    • Знание HTML5 и CSS3, SASS или SCSS
    • Опыт работы с Vanilla JavaScript или jQuery
    • Опыт работы с GIT
    • Знание английского — чтобы понимать документацию

    Как найти работу, если ты Junior Frontend Developer

    Видеозапись отличного митапа HTML-академии и New.HR.

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

    • Чем стажер отличается от джуна?
    • Джун, миддл и сеньор с точки зрения работодателя.
    • Что важнее, образование или опыт?
    • Где джун может получить опыт?
    • Сколько платят фронтендерам?
    • Есть ли дискриминация по полу, возрасту?
    • Нужна ли удаленка джуну?
    • Стратегия поиска работы.
    • Что писать, а что не писать в резюме.
    • Что спрашивают на собеседованиях.
    • Тестовые задания, делать или нет.
    • Как выбирать работодателя с точки зрения оптимальной карьеры?

    Хочу стать frontend разработчиком: базовые знания и план обучения

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

    В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка — одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.

    Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript — и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.

    Три составляющих фронтенда

    Весь фронтенд состоит из трёх составляющих: HTML (содержание и разметка), JavaScript (логика) и CSS (внешний вид, позиционирование). HTML описывает содержание страницы и выглядит примерно так: . CSS описывает стили и выглядит вот так: table < background: #ccc; >. JavaScript — язык программирования, описывает логику приложения, а также обращается к элементам HTML, изменяя структуру и содержание страницы (пример кода: var count = 5; count = count + 5; console.log(count) // 10 ).

    Granatum, удалённо, средняя по рынку от 60 000 до 150 000 ₽

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

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

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

    Первые сайты

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

    jQuery

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

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

    Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части — MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.

    Здесь началась история single page application, SPA — приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX. Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.

    Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular, Backbone — представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.

    Процессоры и сборщики

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

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

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

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

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

    JavaScript

    Насчёт JavaScript: исторически так сложилось, что этот язык изначально был слишком простой и сейчас постоянно развивается, обрастая новыми инструментами. Основная его версия, которая работает во всех современных браузерах, называется ES5. В 2015-м году появился усовершенствованный стандарт JavaScript ES2015, или ES6, который даёт много новых инструментов упрощённого описания логики. Только он не работает в старых браузерах, поэтому используют препроцессор Babel для компиляции его в ES5. То есть код пишется с помощью современного синтаксиса ES6, а для работы в браузере сразу компилируется в ES5.

    Есть ещё разные способы писать нормальный код, которые сводятся к тому же: код пишется на своём «особом» языке (как в случае с ES6), а потом транслируется в JavaScript. Вот некоторые из этих «особых» языков программирования:

    • TypeScript — он добавляет к JavaScript множество инструментов из серьёзного программирования — классы, интерфейсы, модули и др., а также упорядочивает типы переменных. Он больше для того, чтобы писать массивную логику, пользуясь приёмами строгой типизации, и подходит скорее для отдельных крупных логических модулей;
    • CoffeeScript — делает код намного более удобным, понятным, человечным;
    • и ещё много разных — Dart, Elm, я их глубоко не изучал.

    Для упрощения написания HTML, чтобы не ломать пальцы о теги, стали использовать препроцессоры HTML. Они позволяют, например, вместо громоздкой конструкции Ссылка с кучей угловых скобочек писать просто a(href=»#») Ссылка , а потом компилировать это всё в HTML. Очень рекомендую сразу же освоить Pug, сокращающий объем написанного практически вдвое.

    Чтобы удобно вставлять динамические данные в HTML, отделяя данные от разметки, придумали шаблонизаторы. Например, в разметке пишется

    Менеджеры пакетов

    Чтобы не изобретать велосипеды, разработчики давно научились делиться между собой готовыми участками кода, модулями. Во фронтенде для этого активно используется менеджер зависимостей npm. На npmjs.com можно найти огромное количество модулей, плагинов, библиотек на все случаи жизни. Прежде чем писать что-то своё, поищите там.

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

    Менеджеры задач

    Для того, чтобы централизованно управлять всем этим зоопарком, появлялись менеджеры задач. Они позволяют в одном месте описать все процессы и этапы сборки приложения. Это Grunt, Gulp, Webpack. Последний — наиболее подходящий для сборки веб-приложения. Он может взять на себя много забот, легко и просто компилировать все ресурсы, будь то скрипты, стили, разметка, картинки — в любом формате (Stylus, Less, Sass, ES6, TypeScript, jpg, png) из любых исходников — в единые бандлы, сборки файлов js, CSS, HTML, которые будут работать в браузере.

    Компонентная архитектура

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


    Что такое компонент? Это самостоятельный и независимый участок разметки со своей логикой и стилями. У компонента есть свое текущее состояние. Открыто ли меню, активна ли вкладка, и т.п. Состояние всего приложения можно представить как дерево состояний различных компонентов.

    Разметка HTML зависит от текущего состояния, изменилось состояние — изменилась разметка. Это реализуется с помощью технологии Virtual Dom — когда DOM (дерево HTML-элементов страницы) рассчитывается сначала виртуально и в конце расчёта отображается в реальном DOM, в разметке. За счёт этой идеи достигли более высокой производительности приложений, ведь одна из самых тяжёлых частей работы браузера — операции с DOM (работа с деревом объектов HTML).

    Здесь важно ввести ещё одно понятие — реактивные приложения. Это, упрощённо говоря, когда вместо прямого изменения DOM/Virtual Dom при изменении данных, вводится объект состояния, модель данных, и на её изменения подписывается обработчик, который уже меняет DOM. То есть чтобы что-то поменять в представлении, HTML (например, таблица со списком пользователей), нам достаточно изменить свойство модели (добавить в массив нового пользователя), всё остальное произойдет само (пользователь появится в html-таблице). Вы, наверное, замечали, что некоторые сайты медленно работают, а другие молниеносны. Скорее всего, первый на jQuery и работает с реальным DOM, второй — на одном из реактивных инструментов, с которыми мы познакомимся далее.

    React

    Итак, эти концепции (Virtual Dom, компоненты, реактивность) улеглись в новом инструменте создания клиентских приложений от Facebook — React. На текущий момент он является одним из лидеров индустрии, наиболее часто используемым во фронтенде. Он обладает развитой экосистемой — можно найти огромное количество готовых компонентов и дополнений.

    Управление состоянием

    Но между компонентами нужно было наладить связь, им нужно общаться между собой. Нажали на кнопку — изменился цвет. Можно строить эту взаимосвязь напрямую, но это быстро может превратиться в кашу. Тут придумали шаблон централизованного управления состоянием, когда есть одно место, где хранится состояние всего приложения в текущий момент времени. Это, сильно упрощая, такой JavaScript-объект со свойствами. Это состояние изменяется с помощью вызова действий и мутаций, но не будем сейчас так углубляться. Паттерн называется Flux. Самая популярная имплементация управления состоянием для React — Redux.

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

    Vue.js

    Тут появился Vue.js — гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.

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

    Изоморфные приложения, SSR

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

    Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR — Server-Side Rendering. Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.

    Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.

    В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.

    CSS-фреймворки, адаптивность

    Теперь мы сменим тему на попроще и поговорим о вёрстке.

    Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования float: right/left .

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

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

    Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.

    Кроссбраузерность

    Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — -webkit , -moz . Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.

    Методологии

    Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.

    В путь!

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

    1. Изучите основы вёрстки — HTML, CSS. Хватит только основ — остальное наработается в процессе решения задач. Сразу для работы поставьте себе редактор VS Code. Отдельное внимание уделите навыкам работы с Flexbox и CSS grid.
    2. Изучите Bootstrap или bulma.io. Попробуйте создать каркас простого сайта с их помощью; изучите их исходники, они дадут вам хорошее понимание правильной архитектуры проекта. Примерно уже здесь, а лучше как можно раньше, пробуйте собирать какие-нибудь проектики, решать какие-нибудь задачки, нарабатывайте практику.
    3. Изучите JavaScript. Да, тут тоже хватит только основ. Пробегитесь по синтаксису ES6, чтобы примерно его понимать. Попробуйте разобрать, как реализованы те или иные UI-компоненты в вышеупомянутых CSS-фреймворках.
    4. Изучите основы Git. Это система контроля версий, и она уже на данном этапе хорошо вам послужит, позволит фиксировать поэтапно изменения в коде и хранить их.
    5. Изучите BEM/SuitCSS, что больше понравится.
    6. Поймите синтаксис Stylus и Pug.
    7. Начните изучать документацию к Vue.js. Она предельно понятна и на русском языке. В процессе изучения вы узнаете множество смежных вещей — компонентная архитектура, сборка с помощью webpack, работа с API, SSR, flux, автотестирование.
    8. Пробегитесь по библиотеке lodash — она вам очень поможет при написании кода на JavaScript, для более лаконичного кода без велосипедов.
    9. Изучите автотестирование фронтенда. Это важный пункт, если вы сразу его освоите, облегчите себе дальнейшую жизнь. Не откладывайте его на потом. Рекомендую такие инструменты, как Jest и TestCafe. В Vue.js есть хороший инструментарий для автотестов из коробки.
    10. Создайте собственное приложение, используя полученные знания. Придумайте идею или возьмите ту, что у вас давно сидит в голове; не просто так вы ведь решили стать программистом! В дополнение изучите транслируемые в JavaScript языки — TypeScript, CoffeeScript.

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

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

    Профессия 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-разработчика.

    Мастер Йода рекомендует:  7 смертных грехов программиста анализируем и устраняем
    Добавить комментарий