​Почему 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 в реальной жизни

​Евросоюз убирает cookie-стены

Почти все современные сайты информируют пользователей о «печеньках». Но действительно раздражают не эти уведомления, а cookie-стены — баннеры, которые блокируют доступ к сайту, пока пользователь не даст согласие на обработку персональных данных. Согласитесь, ведь одно дело добровольно принимать условия, и совсем другое — быть вынужденным их принять.

В начале мая этого года Европейский совет по защите данных постановил, что cookie-стены действительно нарушают GDPR (General Data Protection Regulation). Похоже, в ближайшем будущем сайты снова станут user-friendly. Ура!

О том, как Евросоюз борется с «печеньем», можно почитать здесь:

https://tprg.ru/ZGOr

#cookie #безопасность

На tproger.ru появился раздел с промокодами на ивенты и курсы от наших партнёров: https://tprg.ru/Ff2S

Заходите и выбирайте, прямо сейчас там есть конференции и по JS, и по .NET, и даже по Ruby On Rails и тестированию.

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

13 способов стилизации списков

Не любите списки? Да вы просто не умеете их готовить!

В своей статье автор делится нетривиальными способами стилизации. Всё оформлено в CodePen, так что можно потыкать код, не отходя от кассы.

https://tprg.ru/BOgt

#фронтенд #css

JS-а много не бывает

В чём разница между CSS Grid и Flexbox

Если коротко, CSS Grid — для разметки, Flexbox — для компонентов. Если наглядно, то посетите замечательный сайт, где на пальцах объясняются главные отличия:

https://tprg.ru/NXsD

Почувствуйте себя официантом, расставляющим тарелки, но перед этим обязательно покушайте: от такого интерактива текут слюнки.

#фронтенд #css

Анонсирован выход Terraform v2.0.0 для VS Code

HashiCorp обещали и сделали! Компания взяла на себя поддержку Terraform, инструмента для управления инфраструктурой в формате кода, и теперь выкатывает новую версию. Более 600 000 установок расширения для VS Code прямо-таки пророчили апдейт.

Плагин полностью поддерживает v0.12, а основной упор сделан на автодополнение кода. Более подробно расписали сами ребята из HashiCorp:

https://tprg.ru/2JoD

#devops #vscode

Шпаргалка по Docker

Здесь собраны полезные опции и основные команды сборки, извлечения образов, запуска и остановки контейнеров.

Если вы работаете с Docker, забирайте этот чит-лист себе — пригодится.

#devops #docker

Когда наконец-то написал CSS правильно

​Боремся с уязвимостью внешних ссылок

Используете во внешних ссылках target="_blank"? А вы любите острые ощущения! Страница, на которую таким образом попадает пользователь, получает частичный контроль над ссылающейся страницей. Через эту ссылку злоумышленники могут произвести фишинговую атаку, используя window.opener.

Не хотите стать чьей-то «рыбкой»? Добавьте атрибут rel="noopener noreferrer" во все ссылки с target="_blank": это предотвратит перехват.

Подробнее в статье:

https://tprg.ru/wrAo

#безопасность #фронтенд

Как спроектировать базу данных, чтобы в будущем не пришлось её переписывать?

Мы тут разобрали грамотное структурирование таблиц. Будет интересно тем, у кого уже есть начальные знания по SQL, но хотелось бы копнуть глубже.

Загляните, здесь полезно: https://tprg.ru/hd9J

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

Все проблемы можно решить с помощью z-index: 1000