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

Как влиться в тренд нынешней веб-разработки, что использовать «маст-хэв», а что просто иметь в виду?

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

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

Чем пользуетесь вы? Как происходит процесс разработки у вас? Ну и в общем подведите итог что по вашему мнению нужно современному верстаку для быстрого и качественного кодинга.
  • Вопрос задан
  • 23189 просмотров
Решения вопроса 4
@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 Куратор тега CSS
Мимо проходил
Автор, у меня почти аналогичная ситуация, я этакий ретроград, и писал бы еще в блокноте до сих пор,но...ну да ладно.
Вся эта новомодная ***, на самом деле, нужна лишь тогда, когда она необходима, когда оно реально оправдывает себя.

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

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

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

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

Что нужно верстаку? Уверенность в своих силах и в оценке проекта, а всё остальное - элементы "упрощайзеры", и нужны ли они Вам - Ваш выбор. Вышеотписавшимся они нужны, мне - нет, и все довольны :)
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
Выше, ну, столько ссылок накидали, что просто свой арсенал перечислю стандартный: Gulp(autoprefixer+sass+browserify) + Sass + Bootstrap4 (как раз на flexbox) + JS плагины по желанию) Тоже суховато, но спрашивайте конкретнее, если что интересно
Ответ написан
Пригласить эксперта
Ответы на вопрос 9
Из книг
Изучаем HTML, XHTML и CSS
Авторы:Эрик Фримен, Элизабет Фримен
Из серии: Head First O`Reilly
Пожалуй самая прикольная. Написано доступно с картинками. Брал здесь.


c3b5097849e94b0b885802b9eb736abc.jpg



Большая книга CSS3
Автор:Дэвид Сойер Макфарланд
Из серии: Бестселлеры O’Reilly (Питер)
Тоже не плохая. Брал там же.


3270f160a4e844ee8c4b3cb4afb98ee7.jpg



ИМХО. Программирование лучше изучать на курсах, под руководством опытного препода.
Есть у кого спросить и попросить помощь. Как у своих однокурсников, так и у препода.
Препод разработчик с опытом - рассказывал, что где понадобиться.
Контроль.
Препод показывал/рассказывал фишки из реальных проектов.
Попутно делал личные сайты для портфолио.
Перед записью на курсы. Прошел сначала бесплатные – понял, что тема мне интересна.


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

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

короче ваще скажем так непосредственно
Ответ написан
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). Превосходный шаблонизатор, экономит массу времени. Очень удобно повторно использовать шаблоны в других проектах.
Ответ написан
arte_di_essere
@arte_di_essere
Senior UXD
Ну так-то вопрос хороший – смотря какие цели ставите перед собой. Если хотите дальше просто верстать (а при опыте 8 лет это имхо как-то не в кайф) то да, прокачивайте скиллы. А если хотите что-то свое сделать, то лучше обзаведитесь хорошей командой – бизнес-аналитик/ux, дизайнер, пару хороших бекендеров.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
HTML Academy Санкт-Петербург
от 150 000 до 180 000 руб.
Jet Admin Москва
от 120 000 до 140 000 руб.
22 окт. 2019, в 08:46
150000 руб./за проект
22 окт. 2019, в 08:40
10000 руб./за проект