freislot
@freislot
Frontend-разработчик

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

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

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

В общем что по вашему мнению нужно современному верстаку для быстрого и качественного кодинга?
  • Вопрос задан
  • 24301 просмотр
Решения вопроса 5
@SuperOleg39ru
Front-end разработчик
Добрый день!

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

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

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

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

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

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

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

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

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

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

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

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

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

Флексбоксы в CSS изучаются только на практике, сидеть и запоминать это бессмысленно. 2-3 проекта с подсказкой по флексу и он плотно осядет в голове.

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

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

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

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

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

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

Что нужно верстаку? Уверенность в своих силах и в оценке проекта, а всё остальное - элементы "упрощайзеры", и нужны ли они Вам - Ваш выбор. Вышеотписавшимся они нужны, мне - нет, и все довольны :)
Ответ написан
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Выше, ну, столько ссылок накидали, что просто свой арсенал перечислю стандартный: Gulp(autoprefixer+sass+browserify) + Sass + Bootstrap4 (как раз на flexbox) + JS плагины по желанию) Тоже суховато, но спрашивайте конкретнее, если что интересно
Ответ написан
arte_di_essere
@arte_di_essere
Senior UXD
Ну так-то вопрос хороший – смотря какие цели ставите перед собой. Если хотите дальше просто верстать (а при опыте 8 лет это имхо как-то не в кайф) то да, прокачивайте скиллы. А если хотите что-то свое сделать, то лучше обзаведитесь хорошей командой – бизнес-аналитик/ux, дизайнер, пару хороших бекендеров.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
NightmareZ
@NightmareZ
Разработчик
Сейчас проще не вливаться, а не выливаться. Всё слишком быстро меняется и слишком много всего разного появляется и, как по мне, в перспективе раздробится на мелкие фрагменты, образовав раздельные сферы деятельности, либо сколлапсирует до чего-то более адекватного.

Это как с кодингом под фронтэнд. Сначала был jQuery, сахара всякие, бабель, затем бэкбоны и прочее, MVC, потом пошёл изврат в виде реакта и ангуляра, вебпак, гульп, бовер, бла-бла-бла... и вот буквально недавно читаю первые статьи на тему "почему MVC на фронтэнде не нужен". Ну наконец-то, думаю я, схлопнулся пузырь.
Ответ написан
dmitry_pavlov
@dmitry_pavlov
World-class .NET freelance contractor (remotely)
Пo CSS советую разобраться с Flexbox позиционированием (очень годная вещь в CSS3 на мой взгляд), ну и в целом, чтобы порядок в стилях был - проникнуться BEM (Block, Element, Modifier) подходом.

Ну а в целом, никто не скажет толком, так как мнений много, что есть must have. Почитайте с десяток статеек вроде этой - Как стать профессиональным веб-разработчиком: прак... - в итоге получите представление, что на слуху сейчас.
Ответ написан
Комментировать
Мне кажется нужно осваивать технологии современные. Приведу пример случая с препроцессором. До недавнего времени верстал тоже сам без всяких препроцессоров. Смотрел некоторые видео по их использованию и думал нафига эти все переменные писать, миксины. А потом как попробовал - это так удобно. Я просто словами не могу передать на сколько удобен scss/sass с его вложенностью.
Ответ написан
Комментировать
@WantToKnowWhatIsWebDev
Возникает много вопросов, изучая PHP (не лечиться)
>что использовать «маст-хэв»,
>сборщики пакетов, препроцессоры, фреймворки, flexbox, grid layout
Можно закрывать обсуждение. Препроцессоры учатся за пару часов, как и флексбоксы, сборщики поболее учатся, а гриды будет просто освоить, если знаешь флексы. Дерзай.
Ответ написан
@nweb
Выше писали про Pug (бывший Jade). Превосходный шаблонизатор, экономит массу времени. Очень удобно повторно использовать шаблоны в других проектах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы