freislot
@freislot
Верстальщик, пытаюсь залезть в фронтенд

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

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

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

Чем пользуетесь вы? Как происходит процесс разработки у вас? Ну и в общем подведите итог что по вашему мнению нужно современному верстаку для быстрого и качественного кодинга.
  • Вопрос задан
  • 20166 просмотров
Сложность: Junior
Решения вопроса 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...

    Дерзайте!
    Ответ написан
  • denisbookreev
    @denisbookreev
    Верстальщик-недопрограммист
    Блин, 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
    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
    Учим English в SkyEng - http://skyeng.ru/go/dmpav
    П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, дизайнер, пару хороших бекендеров.
    Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы