Волшебный мир веб-разработки

MacBook это символ успешного разработчика

У меня в личной жизни внезапно образовалось достаточное количество свободного времени и наблюдая крайне печальное состояние промышленности в Российской Федерации, я решил осуществить свою давнюю мечту - овладеть профессией веб-разработчика, дабы в будущем иметь возможность заниматься фрилансом. Тесно соприкоснувшись с темой веб-разработки, я понял что просто не будет и интернет за эти десять лет (именно тогда я полноценно пытался самообучаться дизайну и вёрстке сайтов) прошёл невероятный путь.
"Миллениалы" придумали новые модные названия для веб-разработчиков: фронтендер и бэкендер. Фронтендер верстает сайт из макета, который нарисовал ему профессиональный дизайнер, добавляет различные нехитрые скрипты на javascript (так что программировать уметь надо) и возможно прикручивает вёрстку в CMS. Бэкендер же отвечает за движок сайта и работу с базами данных, а также он задирает нос и считает себя настоящим программистом, а не как эти "формошлёпы". Если ещё 5 лет назад можно было научиться верстать на HTML5 и выучить CSS, чтобы гордо называться верстальщиком, то сейчас это базовые навыки с которыми не найти работу ни в одной веб-студии, потому что сама по себе вёрстка мало кому нужна. Стек технологий, необходимых для современной разработки сайтов, невероятно разросся и верстальщик теперь немного программист, а программист при необходимости может сам верстать с макета и делать интерфейс. А вот в наше время можно было "нарезать" сайт и сверстать на таблицах...

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

1. Visual Studio Code теперь самый популярный редактор кода, который покрывает 90% задач всех фронтендеров. Atom популярностью не пользуется из-за своей глючности и медлительности, на Sublime Text сидят только старые веб-разработчики, которые просто привыкли к этому "блокноту" за годы использования. 
2. Без ненавистного Adobe Photoshop при работе с макетами никуда. Это де факто стандарт в отрасли. Да, появились очень классные альтернативы, вроде платных онлайн-сервисов Avocode, Zeppelin или Figma, но они больше рассчитаны на быструю разработку мобильных интерфейсов, а не на макеты сайтов. И хотя они декларируют поддержку psd, с мало-мальски сложными макетами однозначно будут проблемы. Не говоря уже о том, что они неправильно читают параметры текстовых слоёв и не отображают/отключают наложенные эффекты. Ребята, которые создали Sketch для Mac OS, профукали огромнейший рынок, не желая переносить свой продукт в web или на Windows. Где достать "Фотошоп"? К сожалению, ценовая политика компании Adobe оставляет мало вариантов для таких новичков как я. Хотя для студентов они дают скидки и длительные триальные сроки.
3. Интернет у нас теперь очень даже векторный и гипертекстовой, так что формат векторной графики SVG используется повсеместно. Хорошим тоном будет в связке с Photoshop иметь на компьютере открытый редактор векторной графики Inkscape, чтобы открывать и редактировать такие файлы. Ну или пару стрелочек нарисовать, если ничто прекрасное вам не чуждо. 
4. Профессиональное обучение на онлайн-курсах стоит достаточно дорого: от 12000 - 20000 рублей и выше, про продвинутый уровень знаний (за который обычно платят компании, а не сам программист) я вообще молчу. Вы можете сказать, что я скачаю на торрентах любые лекции (и это так, они там есть), любые книжки и буду учиться сам. На курсах вы платите не за сами лекции (вместо них можете прочитать кучу статей по теме бесплатно), а за работу наставников с вами, за работу над ошибками и оценку ваших реальных знаний. Я никого не призывают бежать и записываться на какие-либо курсы, но обучаясь самостоятельно, некоторых знаний вы не получите. Не говоря уже о возможности по незнанию получить "неправильные знания и натренировать плохие практики". 
5. Человеческий мозг способен адекватно воспринимать новую информацию не более 4 часов, затем начинается резкое падение эффективности. 
6. Без практики ваши знания ничего не стоят. 80% вашего обучения должна занимать практика, а 20% изучение теории и лекций. Именно это самая ценная вещь на онлайн-курсах, которую вы не скачаете на торрентах: там вас будут всячески пинать, давать и проверять домашние задания, указывать где подтянуть знания. 
7. Будьте готовы к тому, что каждые 2 года меняются технологии разработки сайтов: отмирают старые браузеры, появляются новые фреймворки и методы вёрстки. Будьте готовы учить новое. Эх, а ведь я реально помню те времена, когда страницы верстали таблицами и только-только переходили на "дивы". А сейчас на верстающих только "дивами" будут смотреть косо - сейчас в моде флексбоксы. 
8. В интернете имеется множество бесплатных шаблонов в psd, которые вы можете скачать, сверстать и сделать из них портфолио. И конечно же Chrome DevTools (который открывается по F12) и аналогичный инструмент разработчика в Firefox это классные штуки: постоянно смотрите код сайтов, которые вас заинтересовали, чтобы понять как сделана та или иная вещь, или где верстальщики облажались (частенько встречаются детские ошибки). 

   

   Страница начинающего разработчика

9. На биржах фрилансеров новичку работу найти крайне трудно. Как я уже и говорил, просто вёрстку заказывают редко, а если заказывают, то эти простенькие заказы перехватывают мастера, которые естественно сделают её очень быстро и качественно. Имеются биржи для совершенных новичков типа Work-Zilla, но если вы почитаете отзывы, то там будет масса негативных. Кроме того эта биржа дерёт 15% с выполненного заказа, накладывает ограничение на вывод денег и требует оплаты подписки каждый месяц. А ещё обнуляет вам рейтинг со временем. В общем, там вы в прямом смысле будете работать за еду на неадекватных заказчиков, которые хотят полноценный сайт за 1000 рублей. Раньше был иностранный Upwork, но он теперь платный, да и туда не пробиться из-за индусов. 
10. Я выучил крутые понятия: семантическая вёрстка, адаптивная вёрстка, флексбокс, гриды, pixel perfect, кроссбраузерность. Без реальных знаний этих вещей с вами даже не будут разговаривать как с верстальщиком.
11. Вы удивитесь, но Internet Explorer ещё не помер. 11-я версия этого "замечательного" браузера, который похоронили сами создатели из Microsoft, ещё жива и входит в понятие, которое называется "кроссбраузерность" (а иногда требуется обеспечить соответствие макета и работу сайта в китайских мобильных браузерах и Opera Mini, где не работает половина современных технологий веба). И IE 11 обязательно поломает вам вёрстку, потому что он отличается от браузеров на Chromium и Gecko (Firefox). 

    

    Начав верстать, вам очень скоро захочется установить второй монитор. Это рабочая необходимость

12. Soft Skills работают как и раньше (со времён неандертальцев). А именно: умение общаться с заказчиком, рекламировать себя, искать клиентов там, где не додумаются ваши многочисленные конкуренты -  всё это поможет вам найти работу и получать стабильный доход. Ну или поможет просить денег на еду около церкви с помощью "продающих текстов" на картонке (грустная шутка).
13. Вся актуальная и самая качественная информация по технологиям HTML и CSS только на английском языке, так что базовый английский это необходимость (если честно, ещё не встречал разработчика, который не понимал бы английский от слова совсем - некоторые на этапе обучения пользуются онлайн-словарями, профессионалы учат с репетиторами). Эту информацию часто (плохо) переводят и выкладывают на платформу блогов Medium, а потом воруют всякие ютуберы, которых я смотреть не рекомендую (годных среди русскоязычных блоггеров-разработчиков по тематике фронтенда не очень много). Ах да, никогда не смотрите видеоролики Гоши Дударя - это такой Тимур Сидельников от мира программирования. Фрилансеры очень любят вести каналы на Ютубе, так как это отличная реклама их навыков, но вот учат ли они правильным вещам... это большой вопрос. За многие вещи, которые они запросто показывают в своих видео, вас обругают тимлиды в веб-студиях. 
14. В провинции работы для веб-разработчиков крайне мало и ниша занята давно работающими веб-студиями разного калибра (видел студию из одного человека и из трёх человек, которые умеют натягивать дизайн на Wordpress и максимум работать с jQuery). 
15. Кстати, если вы научитесь "натягивать дизайн" на Wordpress, ModX, Joomla и другие популярные CMS, то возможно не умрёте с голода, потому что спрос на такую работу очень большой. Доля сайтов на Wordpress в мире постоянно падает, но их всё равно около 40%. 
16. Подавляющее большинство веб-разработчиков (как и пользователей) сидят на Windows и не имеют крутых мониторов 4K, так что Retina и вёрстка для Safari это мало кому нужная экзотика. Зато доля пользователей, которые заходят на сайт с мобильных устройств, может быть больше 60%, поэтому ваш сайт обязан правильно работать и хорошо выглядеть на смартфонах и планшетах. 
17. Время! Некоторые считают, что вёрстку можно досконально изучить за 2 месяца и ещё до полугода потратить на изучение основа javascript, средств автоматизации и популярного фреймворка. В любом случае это безумие считать, что вот сейчас вы быстренько выучитесь и пойдёте зарабатывать своими знаниями деньги. Объём материала для получения статуса "джуниор веб-разработчик" - 2000 часов лекций и практики.
    

    

    CM Storm QuickFire Rapid-i выгляди очень брутально

18. Профессиональные программисты обожают механические клавиатуры, но как же они громко стучат ночью (у меня cherry mx black)! Берите клавиатуру на cherry mx red, чтобы было хоть немного потише. Не знаю насколько можно верить всяким топам клавиатур в интернете, но чаще всего в качестве первой механической клавиатуры советуют Cooler Master Storm QuickFire Rapid. Правда это не очень крутой бренд среди клавиатур и отсутствие цифрового блока напрягает (а фронтендерам надо вводить цифры часто), но это довольно старая модель клавиатуры и её можно найти в России по цене 4500 рублей. Впрочем за 5000 рублей уже можно подобрать себе нормальную клавиатуру на понравившихся переключателях. 

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