Shower Presentation Engine

Что сегодня будет

1. Проблема
2. Варианты решения
3. Разбор инструмента

Еще раз

• Ленивый прокрастинатор
• Пишу фронтенд
• Делаю митапы и конференции
• Бегаю за проблемами _{(о чем мы сегодня в первой части доклада и поговорим)}

Проблема

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

1. SPA
2. Preprocessor
3. But it will work only once

Впринципе хромает качество

1. Новичок
2. Нет человека свыше
3. Наше любимое "ну оно же работает"
4. Коммуникация с другими участниками

Проблемы новичка

Никто не проверяет

Для нас почему то

Качество != (Accessability & SEO )

Почему так? 🤷

Почему так? 🤷

1. Отсутствие фундамента
2. Нет возможности проверить качество своей работы
3. Пофигизм

Решения 🧞‍♂️

1. Ментор, наставник, любой, кто сможет сказать что не так с твоим кодом
2. Код ревью
3. Самопроверка

Принцип работы 💡:

https://www.npmjs.com/package/lighthouse

                $ npm install -g lighthouse
                $ lighthouse https://beetroot.academy/
            

https://www.npmjs.com/package/lighthouse-ci

https://www.npmjs.com/package/lighthouse

Cамый крутой кейс использования

npm i --save-dev https://github.com/GoogleChromeLabs/lighthousebot

.travis.yml

            after_success:        
              - npm run lhouse --perf=95 https://your-app-link.com/
        

                after_success:        
                  - npm run lhouse --perf=95 https://your-app-link.com/
                

                запускаем скрипт lighthousebot

                пропустить ПР, если перфоманс >=95 

            

            - npm run lhouse -- https://your-app-link.com/
            - npm run lhouse -- --perf=93 --seo=100 
https://your-app-link.com/
        

                
 --perf # performance
                
 --pwa  # progressive web app score
                
 --a11y # accessibility score
                
 --bp   # best practices score
                
 --seo  # SEO score
            
        

Практика

Сжимаем все текстовые файлы,
которые можно сжать (html, css, js)

Изображения конвертируем в WEBP

            var webp = require("gulp-webp");
            gulp.task("webp", function () {
                  return gulp.src("source/img/**/*.{png,jpg}")
                      .pipe(webp({quality: 90}))
                      .pipe(gulp.dest("build/img"));
              });
        

Изображения конвертируем в WEBP

            <picture>
              <source srcset="photo-01-370x209.webp" type="image/webp">
              <source srcset="photo-01-370x209.jpg" type="image/jpeg">
              <img src="photo-01-370x209.jpg"  alt="clever man">
            </picture>
        

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

Опитимизируйте медиа

Вынесите критический css в head

Критический CSS + прогрессивный CSS = ?

Уменьшаем CSS лениво, Денис Завгородний

Управляйте загрузкой внешних ресурсов

Помни о конечном результате

Полная проверка, после всех этапов разработки.
Знайте, что подключается на вашей странице и для чего

Доступность

Разберитесь с ARIA

Договоритесь с дизайнером о контрасте

Договоритесь с дизайнером о контрасте

У всего должно быть текстовое описание

У всего должно быть текстовое описание

                    <li>
                      <a href="some-link.html">
                      <span class="visually-hidden" > facebook </span >
                          <i class="fa fa-facebook"> </i> 
                      </a>
                    </li>
                

У всего должно быть текстовое описание

                    .visually-hidden{
                          position: absolute !important;
                          clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
                          clip: rect(1px, 1px, 1px, 1px);
                          padding:0 !important;
                          border:0 !important;
                          height: 1px !important; 
                          width: 1px !important; 
                          overflow: hidden;
                    }
                

У всего должно быть текстовое описание

                    <li>
                      <a href="some-link.html" aria-label='facebook'>
                          <i class="fa fa-facebook">
                      </a>
                    </li>
                

Ваш HTML должен быть валидным

Best Practices

Остается заданием на дом 📗

3 заповеди разработчика

Спасибо за внимание

Вопросы/Cоветы