Психология цветов в 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

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

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

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

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

Онлайн-студия big tech night

Если вас не будет в Москве в день ивента, подключайтесь к нашей онлайн-студии. Мы подготовили огненную программу, которая отличается от офлайн-активностей:

🔴 Выступления спикеров от компаний-организаторов и других топов в индустрии
🔴 Микс форматов — от дискуссий и интервью до фановых историй из жизни разработчиков
🔴 Интерактивы с комментариями зрителей

Проведём сразу два прямых эфира:

✨ Студия Hard
В формате дискуссий и интервью обсудим сложные темы — управление IT-командой, AI в разработке, запуск проектов на несколько бизнесов.

✨ Студия Soft
Настоящая вечеринка в формате Late Night Show. Будем общаться, шутить и делиться сокровенным — например, обсудим необычные хобби и безумные pet-проекты.

❗️ Можно переключаться между студиями, чтобы поймать все самые интересные темы.

💻 Мы в эфире 12 сентября с 18:00 до 21:00

❤️Зарегистрируйтесь на сайте, чтобы получить ссылку на трансляцию

Подписывайтесь:
💬 big tech night

Реклама. Рекламодатель: ООО "Яндекс" ИНН 7736207543

Это #партнёрский пост

6 способов автоматизировать ревью кода

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

Познакомиться с ними можно в статье.

#инструменты

Как работает псевдокласс :has() в CSS

Псевдокласс :has — это мощный инструмент в CSS, который позволяет выбирать элементы, основываясь на их содержимом или дочерних элементах. Другими словами, он даёт возможность стилизовать элементы на основе контекста внутри них, чего раньше невозможно было сделать только средствами CSS.

Как это работает?

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */
.card:has(button) {
    border: 2px solid blue;
}

Здесь будут выделены только те .card, внутри которых есть <button>.

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать <div>, если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */
div:has(input[type="checkbox"]:checked) {
    background-color: lightgreen;
}

#простымисловами #css

Несколько интересных функций и расширений для VS Code

Visual Studio Code — основной редактор кода у многих разработчиков. Он гибкий, производительный, универсальный и с богатой экосистемой. Я тоже пользуюсь именно им уже давно. И всегда приятно найти для него что-то полезное, что ещё больше облегчит разработку.

Недавно мне попалась хорошая подборка инструментов для VS Code. Что-то я уже использовал, про что-то рассказывал в канале отдельно, но, например, про VS Code Tunnels не знал и теперь буду пользоваться. Может и вы найдете тут что-то полезное для себя. Не поленитесь чекнуть по ссылке.

#vscode

Как раз к этому времени рабочий код окончательно перестаёт работать

Вопросы для тех, кому не хватает рубрики #вопросответ

Старый, но всё ещё актуальный и пополняемый каталог вопросов по JavaScript. Здесь лежит более 150 вопросов на разные темы. Там же и ответы с пояснениями.

Доступно на 20 языках, так что можете отправить своему другу-иностранцу. Ждёт вас по ссылке.

#вопросы #github