Стек технологий, чтобы верстать быстрее?

Question

[someserj]

Плагины для галпа/вебпака, плагины для редактора, Pug, экранные линейки и прочее, прочее, прочее... Что используете вы и что реально ускоряет верстку?

Comments

[Александр]

Вместо pug советую отдать предпочтение twig и документации schema.org

[someserj]

Александр, template language for PHP. зачем он для верстки?

Answer 1

[Егор Живагин]

1) Опыт
2) Emmet для написания разметки
3) Второй моник
4) Sass/Scss препроцессоры
5) БЭМ, в связке с препроцессорами особенно.
6) Любой шаблонизатор, главное чтоб импортировать файлы умел. Если пишу фуллстэк - юзаю EJS для Node.js. Если только фронт - JSX (React.js)
7) Не юзал zeplin/avocode, но figma - офигенная штука.

*Порядок произвольный, не по важности.

Comments

[someserj]

спасибо, а какие можешь дать рекомендации по второму монитору?

[profesor08]

someserj, если есть большой и широкий монитор, то второй может не понадобиться. Но с одним небольшим это еще тот гемор, постоянно переключать окна.

[Егор Живагин]

someserj, я думаю, любой монитор подойдёт. Мне не приходилось выбирать, на работе что давали - то давали )

[Astrohas]

someserj, FullHD ибо воистину

[Zubastik_1]

Emmet - не использую. Просто потому что я отдыхаю когда пишу ячейки таблицы итп. А Emmet забирает у меня эти короткие минуты релакса. Это то же самое что смотреть сериал без семочек ))

[someserj]

а как в figma импортировать psd?

[Егор Живагин]

someserj, а вот этого не представляю, мне туда макеты дизайнер кладёт

[Алекс Глебов]

someserj, фигма вообще векторная. так что никак. используй авокод

[GitJedi]

Еще Gulp забыли)

[Егор Живагин]

GitJedi, вообще, я его (или вебпак), конечно подразумевал, когда писал про препроцессоры.

ИМХО, сборщики не особенно ускоряют разработку. Делают удобнее, оптимизируют код, ... - да, но не ускоряют разработку) А вот live reload я действительно забыл.

[GitJedi]

Егор Живагин, live-reload ты имеешь ввиду встроенный в редактор, скажем VSCode или упомянутый вышел таск browser-sync в том же gulp? Хотя ты прав и то и то ускоряет работу.

Answer 2

[Anton Filippov]

1) опыт
2) css-препроцессоры, nunjucks, автопрефиксеры, браузерсинк
3) второй(третий) моник
4) зеплин/авокод
5) качество макетов(артборды, хорошая группировка слоёв, отсутствие нейминга слоёв по типу Layer 467 copy copy

Comments

[someserj]

а в чем польза от nunjucks ?

[Anton Filippov]

someserj, инклуд повторяющихся частей, макросы, циклы, то же есть и в pug, но pug реже используют в крупных компаниях, так как паг ещё и препроцессор по сути

[Владимир Проскурин]

5) качество макетов(артборды, хорошая группировка слоёв, отсутствие нейминга слоёв по типу Layer 467 copy copy

А тут уже пофиг, если используется авокод. А всякие скрытые блоки, формы и.т.д., дизайнер в 99% случаев кидает в группу и прячет.

Answer 3

[ValeraValera]

Советы по написанию современного CSS

Answer 4

[doublench21]

Банальщина:

• Гугл
  
• Руки
  
• Мозг
  

Comments

[Wentixon]

Мозг то зачем, это же верстка..

[doublench21]

Wentixon, ну на то он и последний

[profesor08]

Без мозгов руки и гугл бесполезны.

[Wentixon]

profesor08, ну.. Большинство без них вполне успешно работает и больший спрос именно на них, потому что они работают почти бесплатно ;)

Answer 5

[jamster]

Забыли добавить такую полезную вещь, как Сниппеты :)

Answer 6

[Монти Пайтон]

Запускаете Browsersync и открываете ссылку в браузере, на мобилке, ноутбуке, планшете, телевизоре, часах

Answer 7

[Иван]

Как ускорить вёрстку?

Answer 8

[Alexander Litvinenko]

Неполучирться, получиться качественее но не быстрее. Быстрее как раз говнокодить.

Применяя расширенные инструменты вы таким образом автоматом попадаете в определение более качественого специалиста и требования к вам больше. А набор инструментов - стандартный тулкейс для фронтендщика.

Answer 9

[Станислав Зиненко]

Adobe MUSE)