Друзья, добро пожаловать обратно к нам в подкаст! На этой неделе мы порадуем вас интересными практическими темами по разработке: доводы против использования em-ов и rem-ов в ваших CSS стилях, «высокопроизводительная» загрузка веб-шрифтов на страницах, а также рассмотрели разные виды медиа-запросов. Что касается дизайна: поговорили про хороший дизайн таблиц с большим количеством информации, а также про разницу метафор и аналогий в дизайне.
Производительность
Весь контент про производительность в Web — набор практик и методик, которые помогают сделать ваши web сайты и приложения быстрыми и удобными.
Почитайте интересную статью на freeCodeCamp о том почему React покоряет front-end разработку и о производительности.
→ Прямая ссылка ←
Высококачественные изображения притягивают. Всего лишь добавьте несколько фотографий или иллюстраций к себе на сайт или в приложение и смотрите как растет пользовательское вовлечение. Процесс размещения качественных изображений без ущерба общей производительности может быть непростым, но с этим практическим руководством вы научитесь этому искусству.
Вы узнаете всю подноготную теории цвета, форматов изображений, алгоритмов сжатия, поведения браузеров и приложений, а также прочитаете про адаптивный веб-дизайн и не только. Отличная книга для разработчиков подскажет вам методики и даст советы по «доставке» качественных изображений конечному пользователю без ущерба общей производительности.
→ Ссылка для ознакомления ←
Почитайте интересную практическую статью-туториал на блоге Google разработчиков. Здесь и про CSS3, и про JavaScript.
→ Прямая ссылка ←
Почитайте шикарную статью на Smashing Magazine о том, как сделать своего первого Service Worker и заставить сайт работать в offline режиме!
→ Прямая ссылка ←
Почитайте статью на блоге Badoo о том, что ускорение сайта — является главной оптимизацией для хорошего UX.
→ Прямая ссылка ←
Andrew Welch на блоге Studio 107 написал отличную подробную статью о том как нужно имплементировать CSS Critical Path.
→ Прямая ссылка ←
Крис Койер написал небольшую заметку о том, как сэкономить размер картинок с полупрозрачным фоном и использовать JPG внутри SVG вместо PNG.
→ Прямая ссылка ←
JavaScript библиотека progressively начинает подгружать изображения только если они полностью находятся в видимой области браузера. В остальное время — заблюреные миниатюры.
→ Прямая ссылка ←
Крис Койер и Зак Летерман в скринкасте рассказывают нам о все о «производительной» подгрузке шрифтов на страницах.
→ Прямая ссылка ←
Прочитайте интересную статью о том, что злоупотребление CSS свойством background-blend-mode может привести к просадкам производительности.
Bram Stein на ресурсе Performance Calendar написал отличную статью с реальными примерами о том, как реализовать асинхронную загрузку веб шрифтов. Довольно-таки насущная задача.
→ Прямая ссылка ←
На просторах интернета нам встретился онлайн преобразователь растровых изображений в векторные, можно устанавливать степень точности и сохранять в разных форматах.
→ Прямая ссылка ←
Steve Souders на Performance Calendar написал крутую статью об атрибутах defer и async, которые используются для тега <script>. Почитайте!
Наш любимый Smashing Magazine предлагает вам чеклист Front End производительности. Даже в формате PDF можно скачать.
→ Прямая ссылка ←