Как верстать быстрее? Ответ разработчика.

Илья Ландар

Сайты, трафик, маркетинг

Как верстать быстрее? Ответ разработчика.

Верстай быстрее

Автор

Илья Ландар

На чтение

3

Просмотров

29 просмотров

Опубликовано

13.04.2020
Время на прочтение: 3 минут(ы)

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

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

  • 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 препроцессор можно выучить за один день спокойно. Много оперативной памяти он у тебя не займет)

Фокус и среда

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

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

Илья Ландар

Веб специалист
Здравствуйте. Я веб разраотчик, в свободное время пишу статьи. Если есть вопросы по созданию сайта можете написать мне

Вам так же может понравиться

< 1 мин

3 просмотров

Уменьшаем вес картинок для оптимизации сайта

Время на прочтение: < 1 минуты Для начала нам нужно понять зачем нам уменьшать вес картинок. Связь такая. Меньше вес

< 1 мин

3 просмотров

Wow js анимация при появлении.

Время на прочтение: < 1 минуты Что бы сделать анимацию при появлении нам нужно. Github — для скачивания архив wowjs

2 мин

9 просмотров

Просто о сео. Тех часть.

Время на прочтение: 2 минут(ы) При знакомстве с сео, сразу осознаешь что это целая наука которая полностью не изучена

< 1 мин

18 просмотров

Css центрирование. Просто выравниваем блоки.

Время на прочтение: < 1 минуты В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки