Frontendlab: Признаки хорошего кода - Роман Братченко
-
Upload
geekslab -
Category
Technology
-
view
449 -
download
1
Transcript of Frontendlab: Признаки хорошего кода - Роман Братченко
![Page 1: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/1.jpg)
Признаки хорошего кода
Что делает ваш код хорошим и почему его нужно делать таковым?
![Page 2: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/2.jpg)
Свойства хорошего кода:
1. Работоспособность2. Гибкость3. Скорость4. Поддержка
![Page 3: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/3.jpg)
Работоспособность
1. Решает задачу клиента2. Позволяет продать продукт3. Сильный аргумент в споре
1. Не зависит от качества кода2. Является необходимым минимумом
![Page 4: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/4.jpg)
Гибкость
1. Наиболее важный признак хорошего кода2. Баланс: простота или универсальность3. Структура: модульность и гибкая основа4. HTML: поиск простого решения5. CSS: лучший подход на сегодня
![Page 5: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/5.jpg)
![Page 6: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/6.jpg)
![Page 7: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/7.jpg)
Пример того, как могло бы быть<nav class=”nav-calendar”>
<a class=”nav-calendar-item”>январь</a><a class=”nav-calendar-item”>февраль</a><a class=”nav-calendar-item”>март</a>...
</nav>
![Page 8: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/8.jpg)
гибкая структура и планирование дальнейшего развития
![Page 9: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/9.jpg)
![Page 10: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/10.jpg)
Как должно быть<ul>
<li class=”service”><h2 class=”service-header”>Mental Training</h2><p class=”service-text”><img src=”...”>... <a
href=”...”></a></p></li>…
</ul>
![Page 11: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/11.jpg)
.nav .item a {...}
![Page 12: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/12.jpg)
Поддержка
1. Понять ближнего своего2. Верстаем по стандартам w3c3. Решение задачи важней технологий4. Используем теги по назначению 5. Понятные названия классов
![Page 13: Frontendlab: Признаки хорошего кода - Роман Братченко](https://reader033.fdocuments.net/reader033/viewer/2022052410/5557d455d8b42ab6258b48ff/html5/thumbnails/13.jpg)
Скорость
1. сокращаем DOM2. быстрые CSS-селекторы3. оптимизируем изображения4. сокращаем количество запросов5. соблюдаем стандарты