Всем привет. Верстаю, использую кучу примочек, но верстка страницы всё равно занимает много времени (три-четыре дня в усиленном темпе на одну страницу средней тяжести). Интересует мнение верстальщиков - что еще можно добавить в инструментарий для ускорения?
Использую:
БЭМ, SASS (сокращения, переменные), Emmet, заготовленный шаблон для старта верстки (с готовой структурой), наработала снипеты (но обычно макеты разные, не всегда помогает), пиксель-перфект вместе с онлайн-хостом-релоадом, перешла на VSCode (отпала надобность в Gulp), вместо ФШ давно Avocode, наработала быструю схему работы (как могла). Думаю еще подключить webstorm для того, чтобы переносить данные из разработчика сразу в код. И всё равно всё остается очень трудоемким. Делаю разметку руками на флексах, пока адаптацию пропишешь для всех экранов - вечность пройдет. Бутстрап - только хуже делает, без него быстрее (да и костыль).
Прошу совета у бывалых. Может есть еще какие-то фишки, о которых я не знаю, которые могут повлиять на скорость верстки? Думаю о кусках кода по типу миксинов. Буду рада любым советам.
Покажите пример средней страницы. Тогда можно будет понять причину проблемы, которая может заключаться именно просто в вашей скорости работы из-за количества опыта, скорости ввода и т. п.
Например, я и мой коллега используем один и тот же набор инструментов, а я всё равно верстаю в два раз быстрее.
Рустам Байназаров, да, простую прописываю, если не сказали как, но это часто делается довольно быстро - буквально две строчки через transition, JS тоже прикручиваю по мелочи, по крайней мере весь интерфейсный скрипт.
Korsia, Три-четыре дня (по 8 часов считаю) на приведенный в качестве примера макет это многовато, как по мне. Максимум часов восемь. На крайняк десять.
Я обычно беру макет, полчасика втыкаю в него под чашечку кофе, прикидываю, как он будет выглядеть в коде. Потом Нарезка графики, всей сразу (потом удобнее автокомплитом быстро вставлять в код готовые изображения).
Далее полная разметка страницы с наполнением, без стилизации, но классы прописываю сразу (обдумал уже за чашкой кофе). Это самая нудная часть работы...
Ну и останется запустить локальный сервачок с лайфрелоадом и написать стили под все это дело. Это самая объемная часть работы, но и самая интересная.
В силу опыта многие стили пишутся на автомате, практически без участия мозга =))
По инструментарию, в принципе, всё то же самое - webstorm, gulp/webpack, два монитора, музыкальный плеер.
Жесть какая то, что я только что прочитал? Просто поток сознания. Перешла на висикод, отпала надобность в галпе. Как связаны между собой редактор кода и таск менеджер?? Зачем нужен вебсторм? Бутстрап костыль? Просто рука лицо. Автор иди поучи матчасть немного, чтобы у тебя каша в голове устаканилась.
А очень просто связаны. Что-то типа галпа вшито в vscode и мне не нужно запускать node, закидывать кучу хлама в папку с проектом и писать команды руками. А достаточно одну кнопку нажать и вуаля, все само компелируется, одна кнопка и локал хост открывается. Вебсторм даёт возможность переносить параметры, которые вы меняете в режиме разработчика, сразу в файл одним кликом, не нужно открывать док и искать параметр. А Бут - костыль и вы меня не переубедите. Он строго привязывает к процентам в колонке, ещё и превращает html в хлам. Когда не было флексов, он был хорошим вариантом, но сейчас я считаю его мертвым грузом для верстальщика. Для прогера - пожалуйста. Так что с матчастью у меня все нормально.
Korsia, с матчастью у вас все очень плохо. Вы не верстальщик, а недоверстальщик. Вы идите и погуглите для начала, что такое галп или вебпак, а то похоже вы, извините, просто как дрессированная мартышка выполняете какие то непонятные вам команды не понимая их смысл. Галп это менеджер рутинных задач, который выполняет любые написанные вами таски, от пост сиэсэс до сборки и заливки на хостинг. Это как сказать, у меня есть шапка, мне магазин одежды не нужен и ничего, что у вас зад голый? Если бы вы были верстальщиком и немного в теме, то знали бы что в бутстрапе 4 уже давно сетка на флексбоксах. Изначально, с момента выхода. Давно, это чтобы вам было понятно года три. Где вы все это время пропадали? В хлам я боюсь, что html превращаете вы с таким отношением, вы по какой методологии работаете, может и бэм для вас хлам? Как можно строго привязывать к процентам, вы о чем вообще? Вы понимаете вообще, что такое сетка и для чего она? А про кастомизацию сборки бутстрапа слышали? Любой инструмент расчитан под свои задачи, если вы не умеете использовать его это не значит, что он плох. Фреймворки, в том числе и бутстрап берут на себя множество опять же рутинных задач. Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей.
Уф, ну вы и зануда))) Вы всегда девушкам хамите, или это только мне сегодня повезло?
Я верстала на 4м Буте и не раз, знаю, из чего он состоит. Про кастомизацию тоже знаю. Ничего нового вы мне не рассказали, только вопрос зафлудили.
Korsia, почему вы пытаетесь прикрыться гендером? Вроде бы профессия никак с этим не связана. Верстали на 4 бутстрапе много раз, но не вкурсе, что он на флексах. У вас очень аргументированные ответы. Исходя из них, я и рекомендую вам освоить теорию, чтобы как вы выразились не делать адаптацию для всех экранов руками. Именно для этого и используются сетки.
Это всё нужно исключительно для того чтобы это всё готовое использовать в админках или в... других админках. В любом другом +- аутентичном дизайне в 99% случаев из бутстрапа берётся только сетка.
Сергей, ну модальники тоже можно взять к примеру, если нет особых требований, не самому же из писать. Или карусель, если лень ставить какой нибудь слайдер и тоже нет особых эффектов. Если в проекте используем jquery есественно. Сетка мне больше нравится у codyhouse framework, я ее использую, где есть возможность.
Vaultboy84, особых требований нет у программиста, у которого задача - реализовать свою функциональность, используя готовые css-компоненты, не отвлекаясь на написание css-кода. У верстальщика же в подавляющем большинстве случаев требования к верстке особые. Иначе, зачем он вообще тогда нужен.
Jack_Rabbit, да речь то не про бутстрап, а про то, что автор непонимает смысла инструментов, которые использует. Бутстрап костыль, бэм потому что модное слово, галп вшит в висикод. Автору говоришь, что он чушь пишет, а он спорит.
Vaultboy84,мне нравятся ваши выводы. Я прекрасно знаю, что Бут 4 на флексах, я как минимум спецификацию к нему читала, а как максимум там все позиционирование выстроено на флексах с соответствующими классами. Про Галп я образно вам рассказываю, что в vscode есть тот же набор функций, который я использую через галп, и мне с ним проще, но вы прикопались что якобы я не знаю, что это. Вы серьезно думаете, что нормальный верстальщик может не разбираться в инструментах, с которыми работает? Он тогда не может ими нормально пользоваться.
Vaultboy84 Какой-то странный ты...
Сначала расписывал какой бутстрап хороший инструмент, потом Jack_Rabbit объяснил почему это не так и ты сразу "да речь то не про бутстрап", а про что? И не надо говорить что кто-то чего-то не понимает, имхо, в данной ситуации ты не понимаешь...
Какие к чёрту "Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей"? Есть хорошие плагины для всего этого или это пишется всё руками. Ты не в состоянии инпут стилизовать руками? Тебе для этого нужен бутстрап? Если это так, то это тебе нужно учить матчасть.
Единственное, что меня удивило, что автор от галпа отказалась, но видимо галп использовался для совсем лёгких задач, что плагины в vscode смогли его заменить.
IIIu6ko, да, в принципе так и есть, с компиляцией, лайвсервером, спрайтами и прочими мелочами vscode справляется, что-то страшное я на нем не делаю. Если бы делала, думаю, вопрос, который я задала, не особо бы стоял, это уже другой уровень в профессии.
IIIu6ko, ну наверное даже такой идиот, как ты должен понимать, что каждый инструмент хорош для своих задач. Автор написал, что бутстрап это костыль, а я ответил, что это инструмент. Что ты тут вылез и что хочешь сказать абсолютно не понятно. Не поверишь но во многих админках, интерфейсы которых внезапно тоже верстают, часто используется дефолтный дизайн бутстрапа для скорости разработки. К тому же зачем мне ставить какие то специальные плагины. Из перечисленного, переменные для стилей это удобно, зачем их создавать по новой, когда они уже есть, сетка в бутстрапе вполне себе юзабельная, модальные окна не то, что плагин, я сам могу написать, но вопрос зачем, если они есть из коробки с разметкой уже готовой, слайдеры я юзаю все топовые и slick и owl и swiper, но если обычная карусель, зачем мне городить огород, тултипы тоже самое, можно написать, можно скачать плагин, иногда достаточно тех что есть по дефолту в бутстрапе. Остаются инпуты на которые ты перевозбудился. Ну и собственно в чем суть твоего месседжа? С твоими вопросами тут на тостере про то как скрыть бордер у предыдущего элемента и г*внокодингом на джс с var в 2018 году уж точно не стоит кукарекать про матчасть.
Vaultboy84, автор написал, что бутстрап - костыль для нетипичной верстки и всё еще на этом стоит. Если мне нарисуют дизайн, состоящий из типичных бутовых кнопочек и формочек, то всегда пожалуйста, с удовольствием сокращу себе время на верстке.
Korsia, это исключительно ваши проблемы, что вы не понимаете, как работают сетки, а так же не понимаете, что у бутстрапа существует компонентный подход и вы берете, что вам нужно в конкретной задаче: только сетку, сетку и какие то скрипты или не берете ничего и не используете вообще. Если вам нужно забить гвоздь не обязательно для этого брать монтировку, лучше взять молоток, но это не значит что монитровка - костыль для забивания гвоздей, это значит что вы идиот не способный выбрать правильный инструмент.
