Актуальная статья про приоритеты ресурсов в Chrome (а значит и примерно во всём интернете):

https://tprg.ru/XYIi

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

#chrome

​Пользователи: Chrome кушает так много памяти!
Веб-разработчики:

Как ускорить сборку Docker-образов до 30 секунд

Один из этапов попадания фичи на прод — сборка Docker-образа. Иногда сборка длится минуты, иногда — десятки минут, что совсем не круто.

В этой статье ребята из ITSumma (создавали и поддерживают сайты таких СМИ, как: ТАСС, The Bell, «Новая газета») поделились своим опытом оптимальной настройки деплоя и сокращения уровня сборки аж до 30 секунд:

https://tprg.ru/VduW

#devops #docker

​Chaos Engineering

Это такой подход к тестированию, когда систему намеренно ломают в разных частях и смотрят на её состояние.

Например, можно изменять файлы случайным образом, прослушивать порты, внедрять вредоносный трафик в VPC, случайно убивать процессы. Главная цель — получить систему, которая будет способна выдерживать экстремальные условия.

Рекомендуем серию из трёх докладов для ознакомления с этой темой:

— Часть 1: https://tprg.ru/8iab
— Часть 2: https://tprg.ru/Nlr4
— Часть 3: https://tprg.ru/B37L

#devops #тестирование

Автоматический HTTPS

Certmagic — библиотека, с помощью которой можно реализовать автоматический HTTPS для любой программы на Go. Полностью управляемая выдача и обновление TLS-сертификатов:

https://tprg.ru/scSR

#безопасность #go #https

Периодическая таблица HTML

Хотите выучить HTML? Или прокачать существующие навыки? А может просто хотите хорошо и полезно провести время?

Периодическая таблица HTML вам в помощь. Все возможные HTML-элементы объединены в одну таблицу, разбиты на категории и для каждого из них есть описание и ссылочка на дополнительную информацию. Ну кайф же:

https://tprg.ru/3JoL

#фронтенд #html

CSS Grid Generator

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

https://tprg.ru/TO9l

#фронтенд #css

​Когда бэкенд-разработчик успешно поменял что-то в main.css

Гайд по качественной реализации популярного в интерфейсах поведения drag-and-drop:

https://tprg.ru/uM3h

#фронтенд #ux

​101 UX-принцип

Чтобы не напортачить при проектировании UX приложения, важно понимать лежащие в его основе принципы.

В этой статье описан 101 такой принцип — с подробным пояснением и примерами для каждого из них:

https://growth.design/psychology/

#фронтенд #дизайн #ux

​* Илон Маск называет своего сына X Æ A-12 *
Веб-разработчики, пишущие валидацию для формы ввода имени:

​Почему window.matchMedia(), а не window.innerWidth

Используете в JS свойство window.innerWidth? Признайтесь, вам ведь не нужна ширина окна в пикселях? Скорее всего, вы просто хотите проверить, мобильный это экран или нет.

Для этого есть window.matchMedia(): метод возвращает объект MediaQueryList с результатом обработки переданной media query строки. Он не приводит к пересчёту вёрстки и forced reflow, что обеспечивает:

— уменьшение блокировок при выполнении JS;
— быстрый ответ на реакцию пользователя;
— быструю полную загрузку.

Рекомендуем использовать window.matchMedia() вместо вычисления точной ширины там, где возможно. В некоторых случаях это значительно быстрее.

По этой ссылке вы сможете протестировать, как именно работает window.matchMedia(): измените размер браузерного окна так, чтобы его ширина была меньше или равна 700px, и розовый фон в окошке справа станет жёлтым.

#javascript #фронтенд

​Как следить за своими расходами на AWS

Инструмент aws-billing-to-slack может отправлять ежедневные отчёты о расходах в AWS в любой из каналов Slack. Счета разбиты по категориям, а настройка уведомлений максимально проста.

#облака #aws #slack

.door { display: none; }

​Как работать с адаптивными изображениями

Это руководство по синтаксису HTML с примесью CSS. В нём затронуты атрибуты src, srcset, sizes и целый ряд нюансов, которые стоит учесть при работе с адаптивными изображениями.

#фронтенд #html

Работаете c PostgreSQL? Пусть эта лаконичная шпаргалка с основными командами и их расшифровкой всегда будет под рукой.

#бэкенд #базыданных #postgresql

​Какая версия PHP самая популярная

На Private Packagist выкатили статистику в графиках. Автор публикует свои исследования с 2014 года, а свежая статья охватила период с ноября 2019 по май 2020. В статье вы найдёте не просто сухой процентаж. Например, можно узнать о незначительном влиянии COVID19 на статистику, хотя общая тенденция всё же сохранилась. Автор хоронит PHP 5 и торжественно объявляет версию-победителя.

#php #бэкенд

А получился все равно велосипед

Cloudflare запускает круглосуточное онлайн-телевидение

https://cloudflare.tv/

Сейчас ресурс не радует изобилием программ, но и Рим не в один день строился. Эфирная сетка будет состоять из передач о технологиях и бизнесе — только лучшее, только сливки.

«Мы хотим сделать как можно больше интерактивного контента. Например, у нас будут интервью с нашими клиентами и партнёрами, Live-программы, в которых ведущие будут отвечать на вопросы аудитории. Вы сможете в прямом эфире получить ответы от продакт-менеджеров и разработчиков Cloudflare», — обещает Мэттью Принц, сооснователь и CEO компании Cloudflare.

Ну что ж, готовим вопросы и запасаемся попкорном!

#cloudflare

​Погружаемся в ленивую загрузку

Скорость загрузки — важный параметр для сайта, и если картинку подгружать только тогда, когда пользователь до неё доскроллил, эта скорость увеличится.

Разработчик Карлес Ньюнез съел на этом собаку. Дело в том, что современные браузеры поддерживают ленивую загрузку, которая активируется атрибутом loading="lazy". В Chrome такая загрузка начинается, когда до изображения остаётся 3000 пикселей. Карлеса это не устроило, и в дело пошли open source библиотеки.

В своей статье он сравнивает Lozad.js и lazysizes, делает выбор и аргументирует его:

https://dev.to/carlesnunez/deep-dive-into-lazy-loading-images-211f

#фронтенд #html

CSS в реальной жизни