x
 
Василий
15 марта 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как бороться с багами? Часть первая: гигиена кода


Самый простой способ борьбы с багами — не допускать их появления ещё при написании кода. Для этого программисты придумали стили кодирования и линтеры.

Стили кодирования

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

Без форматирования

<div class="lid">
<h1>
Как кофе делает счастливым</h1></div><p clas=
"main_discription">Изучили исследования...</p>
</div>

С форматированием

<div class="lid">
  <h1>Как кофе делает счастливым</h1>
</div> <!-- Див рано закрылся -->
  <!-- Опечатка в атрибуте clasS -->
  <p clas="main_discription">
    Изучили исследования...
  </p>
</div>

Без структуры

.score, .badge 
.counter {
  position: relative;
  font-size: 16px;
  float: left;
  margin: 13px 0;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 20px;
  z-index: 10;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
}

Всё по группам

.score,
/* Забыли запятую, сломался селектор */
.badge,
.counter {
  position: relative;
  z-index: 10;

  float: left;

  margin: 13px 0;
  padding: 14px 0;

  text-align: center;
  vertical-align: middle;

  background-color: #fff;
  border-radius: 20px;

  /* Размер шрифта задан дважды */
  font-size: 12px;
  font-size: 16px;
  line-height: 14px;
}

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

Линтеры

Чтобы за стилем кодирования следили роботы, а не люди, программисты придумали линтеры — программы, автоматически проверяющие код на соответствие выбранному стилю кодирования.

Большая часть линтеров подсказывает исправления прямо в редакторе и по просьбе могут самостоятельно поправить код:

Рубокоп, линтер для Руби, подсказывает, что фигурным скобкам не хватает пробелов
Линтер, встроенный в Кодпен, нашёл ошибку в атрибуте

Lint Like It’s 2015

Другие — не дают сохранить код в репозиторий, если у него есть проблемы со стилем. Третьи — автоматически форматируют код при его сохранении:

Prettier, линтер Яваскрипта, автоматически форматирует код при сохранении

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

Ещё по теме

Make linting great again!

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Каким способом сделать простую анимацию на спрайтах Как устроена беспарольная аутентификация почтой 7




Недавно всплыло

4 1 2 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1