Вопрос верстальщикам. Как вы так быстро верстаете и не умираете от скуки?
Здравствуйте. Поверстал я тут страницы, до этого думал, что это совсем плёвое дело, но уже где-то на 8 макете понял, что ни тут то было: вёрстка для меня предельно понятна, трудностей ни с CSS ни с HTML я не испытываю, но вот сам процесс уж очень изматывает, а именно:
1) Получаем макет.
2) Готовим графику
3) Делаем разметку блока ( возникает ощущение, что этот html я уже где-то писал)
4) Пишем к нему стили ( возникает ощущение, что и этот CSS я уже где-то писал)
5) Делаю разметку следующего блока ( дежавю усиливается )
6) Опять стили (при вёрстке позапрошлого макета прописывал почти что тоже самое)
7) HTML!
8) СТИЛИ К НЕМУ!
И снова! Снова! Снова! Одни и те же действия, одни и те же свойства, одни и те же теги.
Ладно, сверстали мы 1 макет, 5, но когда вы работаете верстальщиком, и у вас страницы потоком идут?! Можно же с катушек слететь от выполнения одних и тех же действий в сидячем, почти неподвижном положении! Когда занимаешься программированием, это всё намного легче происходит, потому что присутствует творчество, разные способы решения задач, лёгкий прилив адреналина и чувство гордости, когда код работает так, как нужно. А цена! Вёрстка лендинга дешевле минимум в 2 раза, чем посадка этого же лендинга на CMS! Я уверен, что чего-то не знаю о инструментах вёрстки, не может быть такого, что столько людей не придумали для себя решений, чтобы верстать быстро и интересно. Использую GULP
, пытался использовать препроцессоры, но вызывает дискомфорт, что я работаю не с конечным CSS, верстаю независимыми блоками, пытался собрать библиотеку независимых кусков кода (html + css) раскиданным по папкам, которые часто встречаются на страницах, но их стало настолько много, что я в них путаюсь уже.
Как вы упрощаете себе жизнь? Как делаете процесс вёрстки интересным и быстрым (тут главное интересным)? И как стать действительно профильным верстальщиком, чтобы не умереть от голода?
Ярослав Иванов: Грубо и высокомерно. Т.е. нет решений, чтобы не повторяться, когда явно видно, что элемент на странице почти копирует элемент, который ты делал на позапрошлом сайте? Тупо копипаст и менять, что нужно?
И снова! Снова! Снова! Одни и те же действия, одни и те же свойства, одни и те же теги.
Всё так.
Музычку в наушники погромче, отключаем мозг, и тупо пишем код.
Появляется нестандартная задача - убавляем музыку, включаем мозг.
Ну и копипаста спасает. Из предыдущих проектов. Блоки похожи, многие параметры задаются через переменные препроцессора, получается копипаста с минимумом правок.
1 Ипользуете БЕМ блоки - заметно ускорят верстку, благодаре реиспользуемости.
2 Разберитесь с перепроцессорами CSS - less, sass, stylus. Я остановился на пока на стайлус. Миксины, работа с переменными и цветами. чем то напомнит программирование и так же поможет в скорости верстки и поддержке проектов.
3. Освойте emmet или pug(jade). Тут дело вкуса, тоже ускорят процесс верстки.
4. Используйет технику помидоро - поработали 20-30 минут - перерыв 5-10. Так раза 2 а потом можно и большой. Но это не каждому заходит, но помогает сконцетрироваться на задаче.
5. Сброщики проектов gulp/grunt/webpack - автоматизируют рутину. Тут нет предела для творчества
6. Изучите JS, - будет не скучно))))
Поддерживаю каждое слово! Сам хотел подобный ответ дать))
По поводу БЭМ даже добавлю. С БЭМ каждый проект это как написание своего фреймворка) да еще и возможность использовать некоторые части в следующем проекте. Ну и JS, стоит его применять как все становится очень интересным. Vue, Angular, React - то что никогда не даст скучать))
Если скучно, идите во фронтенд. JS не даст заскучать :)
А так, ну что могу посоветовать:
- используйте препроцессоры, это реальное подспорье. Особенно, когда приходится много и тупо писать стили. Напишите миксины, копите их в репозитории и переиспользуйте. Чтобы написать универсальный миксин, надо постараться и подумать.
- напишите стартовый шаблон для типовой верстки. Это ооочень ускорит процесс и он не будет таким нудным
- используйте шаблонизаторы! Pug(Jade) просто отлично заходит. Пилите layout, header, footer и отдельные блоки в отдельных файлах, потом просто втыкаете на страницу. Опять же, можно писать миксины, функции и прочие вещи.
Подходите к работе с умом, а не на автоматизме. Поверьте мне, вы не умеете верстать) Это намного более обширная область, чем клепание html и css изо дня в день.
Опять же, попробуйте профилировать вашу верстку. Наверняка узнаете оочень много интересного. Например, что из за обширных анимаций отрисовка начинает тупить и нужно как то выкручиваться. В общем, много всего прикольного в верстке, стоит только включить голову
Экспериментируйте. Пользуйтесь препроцессорами, когда один надоел, то пробуйте другой. И далее в таком же ключе. Даже банальная смена темы в редакторе привнесёт "свежесть" в работу.
Работайте над собой. Люди не рождаются усидчивыми. Их делает таковыми жизнь.
Сядьте и поставьте цель: не вставать со стула и не отвлекаться ни при каком условии, пока не завершу проект. Мне это очень помогает
А что мешает иметь разный круг задач, а не только верстать? Я чередую верстку и бекэнд, благо позволяет ситуация заниматься , чем нравится. А чисто верстать 8 часов в день, 5 дней в неделю - да, пожалуй, утомительно становится.
На счет цен на фрилансе верстка дешевая есть, подстать специалистам, делющих ее.
Если рассматривать лендинг, то у меня наоборот верстка будет дороже раза в 2-3, чем натяжка на cms. Бекэнд дорожает с более менее сложных заданий, типа магазинов или порталов.
webflow мне намного упрощает работу. зачем мучить себя и писать код, если можно его нарисовать, а потом начинается самое интересное - допиливание и поиск червячков.
XFile, и часто ли вы пользуетесь Display: table? - Если часто, то ничего не мешает прикрепить необходимые стили к определенному элементу через встроенный код.
Не понимаю зачем делать вновь, если он генерирует абсолютно чистый семантический код?
Экспортируй и используй. Почему с JS не дружит? Про какое меню вы говорите? И почему нельзя создать его по средством панели взаимодейстйи? Почему своё не вставить? Webflow замечаельно дружит со встроенным кодом. Вы можете прикреплять свой код к коллекциям и к обычным элементам.
Я полагаю, что вы просто пробежали глазками и не вникали в сам инструмент. Это крайне мощная вещь, которая способна создавать сложнейшие макеты, анимации, интернет магазины и блоги.
lukoie, да, я начал его использование в Феврале 2018 года. Видел. Я бы советовал и вам, и XFile попробовать снова. Поверьте, он изменяется ежедневно, они создали замечательные условия для интеграции своего кода внутри проекта Webflow
Безусловно, в плане гибкости - лучше, а в плане скорости - webflow. Единицы верстальщиков способны обогнать разработчика, который использует webflow. Вы способны использовать большинство современных возможностей ручной верстки. Если необходимо что-то, что webflow не позволяет сделать - используйте вставку и назначайте дополнительные свойства по классу.
С какими проблемами вы столкнулись?
Около 200 доллоров в год. Это 12 000 - приемлемая цена, которая экономит много времени. Но это субьективно. Конечно, для кого-то дорого.
"Потом вы если сделаете экспорт проекта, удалите его со своего аккаунта - ведь там ограничение, то что делать если нужно будет доверствывать проект через год?" - что вы подразумеваете?
- Какие ограничения? После экспорта ваш проект отвязывается от webflow полностью (за исключением CMS. Но если вы хороший фронтед - можете подправить код для работоспособности CMS и электронной коммерции).
Что делать? - просто доделовать. Вы получаете обычный html-файл (как если бы создали его при ручном кодировании), который можете редактировать как угодно. Он ничем не ограничен.
Вы говорили про блоки, но webflow - это сервис верстки. Если вам нужен необходимый блок - вы должны его создать. Это не Elementor или что-то такое, чтобы вам давали пару готовых блоков и возможность их редактировать.
"А в вебфлоу еще до сих пор бедная библиотека UI. Вставили бы они туда пару-тройку сотен готовых блоков, которые можно кастомизировать под себя - блоков на все случаи жизни." - сервис верстки, а не следующий Wix.
XFile, но вы сами используете визуальный конструктор для верстки. Это к утверждению - "Все с вами ясно - "любители мышиного программирования" - no pro.... "
На сегодняшний день, Webflow - собственная плтаформа с своей CMS. Чисто технически они не способны создать возможность импорта. И вы должны это, как грамотный веб-разработчик, который следит за обновлениями WF, понимать. Программирование само по себе - нелегкая задача. Webflow действительно сложен в ознакомлении, но он сложен сам по себе. Это не типивой конструктор Web-страниц. В награду он позволяет делать гибкие и потрясающие сайты, которые не создаст ни один ведущий построитель страниц. Что говорить, не каждый программист.
Действительно, это возможно. Создать из шаблона WF - тему Wordpress.
Вы абсолютно не видели его возможностей. Как я предполагаю, вы искали типовой конструктор, который состоит из блоков. Который максимально прост, но и позволяет делать максимально простые вещи. У вас свой взгляд - у меня свой.
Простой
