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;
}

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

Стили коди­ро­ва­ния — отлич­ные учеб­ники для начи­на­ю­щих. Чтобы научиться писать чистый и под­дер­жи­ва­е­мый код на ХТМЛ и ЦСС, сове­тую изу­чить попу­ляр­ные стили кодирования:

Линтеры

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

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

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

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

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

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

Ещё по теме

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

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

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

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

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

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

Что такое СВГ и как его использовать в ХТМЛ-вёрстке? 1 Джанго или Рельсы? Как следить за качеством кода? Часть первая: зачем Вы используете Зеплин? 2




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

Хочу научиться сторителлингу 2 Как найти себе замену 1 2 В бюро есть таймтрекинг для сотрудников? 5