.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

Таблица с CSS триггерами

Здесь вы найдёте некоторые свойства CSS и информацию о том, как они влияют на производительность браузерных движков:

https://csstriggers.com/

Разноцветные полосочки демонстрируют:

— Layout: перерасчет макета
— Paint: прорисовку макета
— Composite: компоновку макета

#фронтенд #css

Какие расширения тормозят ваш Chrome

DebugBear проанализировал 1000 популярных расширений браузера и сделал выводы на базе таких показателей:

— Время блокировки основного потока
— Задержка рендеринга страницы
— Время обработки в фоновом режиме
— Количество потребляемой браузером памяти

Если расширений нет, условный сайт загрузится за 40 мс. Если же вы установите Evernote или Grammarly, время загрузки возрастёт до 500 мс. А пока вы не начали массово искоренять расширения, посмотрите саму статью — там интересно:

https://tprg.ru/aeSt

#chrome