Как влиться в тренд нынешней веб-разработки?
==============================================

 Такой вопрос, лет 8 осознанно занимаюсь версткой сайтов, но делаю это скажем так "топорно, по-дедовски", т.е просто пишу руками разметку, стили и скрипты. Начал сильно ощущать недостаток знаний в этой сфере, плюс ко всему очень часто в подкастах да и на просторах интернета встречаю незнакомые мне вещи: сборщики пакетов, препроцессоры, фреймворки, flexbox, grid layout и многое другое. В моей повседневности, в работе, я лично дальше bootstrap'а и ручной писанины в sublime text не ушёл, но очень хочется понять чем действительно стоит пользоваться.  

  

Даже не знаю как правильно сформулировать вопрос, знания то они есть, но я не совсем представляю "сегодняшний" процесс разработки, для чего нужны gulp, webpack и пр. Какие требования к рабочей среде предъявляются, чтобы использовать эти современные инструменты.   

  

В общем что по вашему мнению нужно современному верстаку для быстрого и качественного кодинга? 

 Добрый день!  
  

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

> flexbox, grid layout

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

Немного о новинках в css [тут](https://htmlacademy.ru/blog/41-css-you-can-get-excited-about-in-2015).  

Поддержка браузерами [тут](http://caniuse.com/).  
  

> gulp, webpack и пр.

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

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

  

> препроцессоры

 - представьте, что вам чего-либо не хватает в html и css.  

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

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

Популярный шаблонизатор [Pug](https://pugjs.org/api/getting-started.html)  

Один из css-препроцессоров [Stylus](http://stylus-lang.com/)  
  

> пакетные менеджеры

 - это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm [тут](https://habrahabr.ru/post/243335/)  
  

Ну и конечно статьи и подкасты:  

<https://habrahabr.ru/>  

[jsraccoon.ru](http://jsraccoon.ru/)  
  

<https://soundcloud.com/web-standards>  

<https://radiojs.ru/>  
  

Конкретные статьи и ресурсы для новичка:  
  

[frontender.info/a-baseline-for-front-end-developers](http://frontender.info/a-baseline-for-front-end-developers/)  

[frontender.info/a-guide-to-flexbox](http://frontender.info/a-guide-to-flexbox/)  

[css-live.ru/articles-css/pravilnye-kontrolnye-toch...](http://css-live.ru/articles-css/pravilnye-kontrolnye-tochki-v-css.html)  

[https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...](https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%D1%8F-front-enda-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-f524d668f328#.ggazs9f6b)  

[https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...](https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%D1%8F-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0-%D1%87%D0%B0%D1%81%D1%82%D1%8C-2-25f19e56eb29#.8a4q8fyal)  

<https://habrahabr.ru/company/zfort/blog/321214/>  

[https://frontendmasters.gitbooks.io/front-end-hand...](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/)  
  

Дерзайте! 

 Блин, 8 лет верстать "по-дедовски")  

Да за это время можно было стать Senior developer или даже выучиться на фуллстак и уехать в какой-нибудь Израиль работать за 4к $  
  

Препроцессоры я познал за один день. Для CSS использовал сначала less, через месяц ушел на Stylus (советую именно его, так как всякие sass это вообще мрак. Работать в чужом проекте на sass - ад, тогда как stylus прост, при этом более функционален и намного интуитивнее).  
  

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

Сборщик проекта. Для верстки, если выбирать между Grunt и Gulp - без сомнений Gulp. Я очень счастлив, что мне в тот момент подвернулась именно статья про Gulp. Работал с проектами на Grunt (их очень мало) - ну, это просто дерьмо, а не сборщик. Скорость сборки отличается в разы.  
  

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

Флексбоксы в CSS изучаются только на практике, сидеть и запоминать это бессмысленно. 2-3 проекта с [подсказкой](http://frontender.info/a-guide-to-flexbox/) по флексу и он плотно осядет в голове.  
  

Вывод: надо просто не бояться нового. Берешь и применяешь новые технологии без страха и зазрения совести. Они быстро вольются в твою жизнь, а без них потом будет дышать тяжело и больно.  
  

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

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

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

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

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

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

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

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

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

Если есть интерес к разработке, то наверное, лучше будет углубится в тот же JS, PHP, другие веб-языки.  
  

Что нужно верстаку? Уверенность в своих силах и в оценке проекта, а всё остальное - элементы "упрощайзеры", и нужны ли они Вам - Ваш выбор. Вышеотписавшимся они нужны, мне - нет, и все довольны :) 

 Выше, ну, столько ссылок накидали, что просто свой арсенал перечислю стандартный: Gulp(autoprefixer+[sass](https://www.npmjs.com/package/gulp-sass)+[browserify](http://browserify.org/)) + Sass + Bootstrap4 (как раз на flexbox) + JS плагины по желанию) Тоже суховато, но спрашивайте конкретнее, если что интересно 

 Ну так-то вопрос хороший – смотря какие цели ставите перед собой. Если хотите дальше просто верстать (а при опыте 8 лет это имхо как-то не в кайф) то да, прокачивайте скиллы. А если хотите что-то свое сделать, то лучше обзаведитесь хорошей командой – бизнес-аналитик/ux, дизайнер, пару хороших бекендеров. 

 нынче скажем так маст-хэв кейсы и флексбоксы  

также ваще в моде фулстек-имплементация   
  

в офисной работе непосредственно очень важны именно мода и понты!  

иначе ты лузер  

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

короче ваще скажем так непосредственно 

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

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

 Пo **CSS** советую разобраться с [**Flexbox**](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) позиционированием (очень годная вещь в CSS3 на мой взгляд), ну и в целом, чтобы порядок в стилях был - проникнуться [**BEM**](https://tech.yandex.com/bem/) (Block, Element, Modifier) подходом.  
  

Ну а в целом, никто не скажет толком, так как мнений много, что есть must have. Почитайте с десяток статеек вроде этой - [Как стать профессиональным веб-разработчиком: прак...](https://habrahabr.ru/post/303896/) - в итоге получите представление, что на слуху сейчас. 

 Мне кажется нужно осваивать технологии современные. Приведу пример случая с препроцессором. До недавнего времени верстал тоже сам без всяких препроцессоров. Смотрел некоторые видео по их использованию и думал нафига эти все переменные писать, миксины. А потом как попробовал - это так удобно. Я просто словами не могу передать на сколько удобен scss/sass с его вложенностью. 

 >что использовать «маст-хэв»,  

>сборщики пакетов, препроцессоры, фреймворки, flexbox, grid layout   

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

 Выше писали про Pug (бывший Jade). Превосходный шаблонизатор, экономит массу времени. Очень удобно повторно использовать шаблоны в других проектах.