Адаптивные изображения и подписи на CSS: как работают container queries и :has()

Container queries и селектор :has() делают адаптивность вёрстки проще и чище. Разбираем, как с их помощью построить компонент с feature image, который подстраивается под контейнеры, меняет расположение и стиль подписи, оставаясь стабильным при любой ширине.

Подробности тут.

#фронтенд #css

И это чисто тудушка для портфолио

Интерактивное руководство по SVG-контурам

Элемент SVG <path> известен своей сложностью. Его синтаксис не настолько сложен, как у регулярных выражений, но и удовольствия от работы с ним не возникает. При этом это всё ещё очень удобно и востребовано, поэтому отказываться от его использования не стоит.

Если у вас ломается мозг от работы с SVG, то я рекомендую вам вот это руководство. Тут пошагово показано, как вообще это всё работает. Вы один раз увидите и наконец-то поймете, что за странные буквы и числа написаны в пути контура.

Сохраняйте и делитесь с близкими: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/

#svg #руководство

Психология цветов в UX

Мы знаем, что интерфейс должен быть привлекателен и отвечать современным трендам. Вряд ли вы захотите пользоваться сайтом с вырвиглазным фоном или плохо читаемым текстом. Но это то, что лежит на поверхности и довольно очевидно.

А вот если вы копнете глубже, то узнаете, что выбор цвета может повлиять на пользователя с точки зрения психологии, отразиться на видении бренда, и даже на установлении эмоциональной связи с пользователем. Об этом подробно рассказал Родольфо Энрике в своей статье. Предлагаю и вам почитать её.

#ux #дизайн

От массивов до объектов в JavaScript: пособие для новичков

Базовая статья для новичков в JS. Как работают объекты, зачем нужны, в чём их прелесть и как они помогают организовавывать и обрабатывать данные? Всё по ссылке.

#javascript

Продолжаем делать 3D-текст без использования JS

В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.

Первая часть тут.
А вторая тут.

#фронтенд #css

В NGINX появилась встроенная поддержка ACME — теперь HTTPS настраивается без Certbot и лишних утилит

Команда NGINX представила предварительную версию модуля ngx_http_acme_module, обеспечивающего встроенную поддержку протокола ACME без необходимости использовать Certbot и другие внешние утилиты. Теперь можно запрашивать, устанавливать и обновлять SSL/TLS-сертификаты напрямую, что значительно упрощает процесс настройки HTTPS. Модуль реализован на Rust с использованием NGINX-Rust SDK и доступен как в Open Source-версии NGINX, так и для корпоративных клиентов NGINX Plus от F5. Wildcard-домены и регулярные выражения пока не поддерживаются.

Новый уровент удобства для DevOps-специалистов!

@prog_tools

Максимально просто рассказываем, как работают микрофронтенды

В двух словах: микрофронтенды — это аналог концепции микросервисв, но для фронтенда. То есть пользователь видит цельный сайт, но на самом деле под капотом это сшитые отдельные модули, которые могут быть написаны на разных фреймворках разными командами.

Если вам этого объяснения хватило — отлично. А если хотите разобраться подробнее в тонкостях, плюсах и минусах, то переходите по ссылке.

#микрофронтенд #фронтенд