Как ускорить верстку сайтов


Этот урок пригодится по большей части начинающим программистам, хотя и бывалый верстальщик сможет подчерпнуть немного мудрости из моих советов



Изучите технику слепой печати

Вся работа с кодом упирается в то, что его надо написать, и в этот момент больше всего тормозит ваша скорость набора текста, тренируйте навык слепой печати, пока не сможете в полной темноте, не видя клавиатуры, быстро писать код без ошибок

Повышает скорость примерно на 30%





Используйте препроцессоры

Когда я перешел с css на sass скорость моей верстки увеличилась примерно на 20%, а когда с scss синтаксиса я перешел на синтаксис отступов, скорость увеличилась еще на 5%


Мои рекомендации препроцессоров

  • Для css - sass с синтаксисом отступов
  • Для html препроцессор pug(старое название jade) это лучшее что вы можете найти
  • А для javascript отличным выбором станет CoffeeScript

Все упирается в то, чтобы писать меньше кода получая тот-же результат



Полюбите таск менеджеры

Смело могу сказать, что грамотное использование таск-менеджеров повышает скорость верстки на 100-150%, да, да

Рекомендую использовать gulp, как по мне это самый быстрый и гибкий task-manager, хотя webpack тоже не плох, но он немного непонятный и gulp гораздо проще



Используйте менеджер пакетов

Самые адекватные это bower и npm, их и советую

Увеличивает скорость на 3-5%





Создате стартовый шаблон

Стартовый шаблон, это настроенный проект для старта, в нем уже есть все что вам нужно, настроенный task-manager, normalize.css, bootstrap и так далее

Суть в том, что вы должны просто взять его, и сразу начать верстать, все, никаких потерь времени

По моим оценкам, скорость увеличивается примерно на 7-10%



Делайте заготовки

Нет ни на зиму, а на стандартные элементы, например мобильное меню, анимацию кнопок, инициализацию js-плагина

Для сохранения кусков кода советую использовать github gists

Прирост скорости 5-8%





Обновите железо

Как бы банально это не звучало, но подвисающий photoshop или долго загружающаяся система действительно отнимает у вас драгоценное время

Рекомендую брать железо примерно на 20% мощнее чем вы думаете вам понадобится

  • ssd - обязательно, не менее 240gb
  • Процессор - не ниже i5/fx 8300
  • Оперативная память - не менее 8 gb
  • Видеокарта - не ниже rx 460 4gb
  • Slim клавиатура - обязательно (ускоряет процесс набора текста)(обязательно проводная)
  • Мышь - обязательно проводная

Конечно эти рекомендации только для тех кто настроен серьезно, а не пришел в программирование просто пойграться

Прирост в скорости 20-30% (при условии что вы были на слабом железе)



Используйте два монитора

В дополнение к предыдущему пункту, 2 монитора ускорят вашу работу на 20-30%, это происходит благодаря тому что отпадает необходимость переключатся между текстовым редактором и браузером






Ну что друзья, использовав все советы вы можете увеличить скорость верстки в 3 раза! Это великолепно, если у меня появятся еще советы я дополню статью, успехов!