Все мы понимаем что время — деньги. И если ты занимаешься версткой сайтов. Тебе бы хотелось бы делать это быстрее и эффективнее. Я раньше выискивал эту информацию на форумах, записей конференций или спрашивал напрямую и опытных разработчиков. И сегодня поделюсь частью этого опыта с вами.

Что бы верстать быстрее тебе нужно пользоваться

• Browser — sync
• Emmet + подсказки
• Препроцессорами
• Фокус и среда

Browser — sync

Когда я только начинал заниматься вебом, я нашел сразу такую проблему. Что бы обновился контент который я добавил на html страницу. Мне нужно вечно нажимать F5 и тем самым обновлять страницу. И когда ты только учишься ты это делаешь постоянно. Что бы посмотреть работает ли вообще твой код. И естественно это занимает кучу времени если ты по 100 раз переключаешься с редактора кода на браузер и обновляешь его. По этому изначально я пользовался скриптами которые обновляли страницу каждые 5 сек. Потом начал пользоваться расширением браузера LiveReload. И к каким только безумствам я только не приходил что бы облегчить себе работу. Но самый лучший способ которым я и сейчас пользуюсь это плагин для сборщика gulp — Browser sync. Его задача просто смотреть за документами html, css, js, php и если он видит что документ изменился. Он обновляет страницу самостоятельно.

Emmet + подсказки

Далее идет плагин Emmet который есть в любом редакторе кода. Его задача сокращать количество набранных нами символов, но при этом получать такой же код. Например что бы написать данную конструкцию

Вручную

<div class=’class’></div>

С плагином Emmet

.class (+ нажать TAB)

C плагином Emmet нам нужно будет меньше писать. А существенно повлияет на время написание кода. Плюс Emmet дает тебе подсказки. Он начинает догадываться и выводить тебе что ты хочешь написать с первого символа.

Препроцессоры

Пользуйся препроцессорами. Я тоже был раньше противником препроцессоров. Но потом понял что это был просто страх чего — то нового. А когда ещё ты учишь параллельно много всего. Ты не хочешь забивать голову ещё препроцессорами. Которыми в принципе можно и не пользоваться. Тебе не нужны знания препроцессоров что бы верстать. Но что бы быстро верстать и эффективно они тебе супер необходимы. Плюс css препроцессор можно выучить за один день спокойно. Много оперативной памяти он у тебя не займет)

Фокус и среда

Я бы поставил бы этот пункт на первый. Но он может много кому показаться банальным. Если у тебя удобная рабочая среда и нет отвлекающих факторов это тоже повлияет на твою эффективность положительно. И хочу заметить удобная среда для каждого разная. Удобная среда может быть как и порядок так и беспорядок на рабочем месте. Там меня всегда твориться хаос, но мне так удобно и я так максимально эффективен. Ну и не стоит забывать про концентрацию выключи соц сети убери все отвлекающие факторы. Закончи верстку, а потом уже посмотри что тебе написали.

Более наглядно про все эти факторы я рассказываю в этом видео можешь взглянуть.