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

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

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

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

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

Повышает скорость примерно на 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 раза! Это великолепно, если у меня появятся еще советы я дополню статью, успехов!

Тебе может понравится

Сетка bootstrap 4. Что нового?

18 января 2018 года случилось важное событие - вышла из беты четвертая версия bo
Показать полностью...

Что такое информационная архитектура (ИА)?

Узнайте, как информационная архитектура (IA) может помочь вам создать эффективны
Показать полностью...

Выбор сайтов-вдохновителей для веб - дизайна

В нашем главном эпизоде еженедельника Webresult Ribbit Мэри и Натали обсуждают,
Показать полностью...

Привлекайте посетителей сайта, не готовых покупать

Распространенной ошибкой при создании сайта является предположение, что все гото
Показать полностью...

5 Советов по созданию ценностного предложения в Интернете

Ценностное предложение на основе Интернета отличается от миссии вашей компании.
Показать полностью...

Брак, заключенный в Цифровом Раю

Каждый посетитель вашего сайта несовместим с вашим бизнесом. Как и хороший профи
Показать полностью...