✍️ Stadt – современный геометрический гротеск, вдохновленный стилем баухаус. Он используется в карточках и подзаголовках дизайна Ray Ban Elegant Sunglasses Store App

Сайтодел | #шрифт

💾 Liquid Text Effect – текст с "жидким" эффектом и анимированным градиентом. Здесь используется библиотека WebGL.

Сайтодел | #сниппет #css

🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.

Сайтодел | #репозиторий #github

👩‍💻 Тег для рисования графики и анимаций прямо в браузере!

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

Он используется для:
• интерактивных графиков и диаграмм;
• анимаций и визуальных эффектов;
• браузерных игр;
• обработки изображений;
• 2D- и 3D-графики через Canvas API и WebGL.

Для работы с холстом обычно получают один из контекстов:
• 2d — обычная двумерная графика;
• webgl — аппаратно ускоренная 3D-графика.

Элементы, нарисованные внутри <canvas>, не являются отдельными DOM-элементами — браузер воспринимает их как единое изображение

📣 Code Ready | #атрибут

🖥 Figma Charts & Infographics UI Kit – набор готовых графиков и диаграмм. Содержит наиболее распространенные шаблоны визуализации данных, от простых столбчатых диаграмм до сложных карт.

Сайтодел | #макет #figma

Почему CSS-переменные раньше не анимировались?

Многие пытаются сделать так:
.box {
transition: --angle .3s;
}

Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает.

Регистрируем переменную через @property.
@property --angle {
syntax: "<angle>";
}

Теперь браузер знает тип значения и умеет интерполировать его.

Остаётся использовать переменную как обычно.
.box {
transform: rotate(var(--angle));
}

И менять её значение.
.box:hover {
--angle: 180deg;
}

Теперь поворот происходит плавно без JS.

🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать.

📣 Code Ready | #совет

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

13 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

💾 Cat Toggle Button – переключатель светлой и темной темы в виде котика. Изображение детализировано и нагружено смыслом, чтобы пользователю не было скучно.

Сайтодел | #сниппет #css

💾 Ball – сфера в виде мяча с линиями из букв. Вращать фигуру можно только за специальную круглую кнопку.

Сайтодел | #сниппет #css

Самый прогерский канал, где за 10 минут ты научишься:

/ Пр0бuв по фото и номеру в ТГ
// Как взломать вебку подруги
/// Мануал по OSINT разведке

Ссылка действительна
23 ч. 59 мин. 👇
https://t.me/+mpeDqlACsfgxODJi

👨‍💻 Создаем своего первого AI-агента в Claude code

Шпаргалка на русском.
Сохраняем 👍

🙂 Лайф | 📲 Зеркало Max

#нейросеть #cheatsheet

😂

С добрым утром! ☕️

Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS»

В этой статье:
• использование `:has()` для управления состояниями компонентов;
• создание модальных окон и подсказок через Popover API;
• валидация форм с помощью встроенных возможностей браузера;
• стилизация сложных интерактивных состояний только средствами CSS.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

Портфолио, из-за которого тебя не зовут на собеседования

Ты веб или граф дизайнер, но хочешь перейти в продукт?

Есть ошибки, которые делают 80% ребят в портфолио, и потом думают, что дело в недостатке опыта.

Мы собрали чеклист «10 редфлагов в портфолио», которые мешают перейти в продукт и получать х2 по деньгам.

💥 Примеры плохих и хороших кейсов
💥 Что убрать, что добавить в кейсах
💥 Как адаптировать портфолио под продуктовый рынок

Забрать чек-лист редфлагов в закрепе: @formfactor

Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!

После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов.
const container = document.createElement('div');
const text = document.createTextNode('Hello');

container.append(text);

const tail = text.splitText(2);

console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']

Для рендеринга это обычно не имеет значения:
console.log(container.textContent);
// Hello

Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.

Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:
container.normalize();

console.log(container.childNodes.length);
// 1

console.log(container.firstChild.data);
// Hello

Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.

При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.
console.log(tail.parentNode);
// null

Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.

Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.
<p>Hello <strong>DOM</strong>!</p>

Здесь текст до и после <strong> останется в разных Text-узлах и после нормализации.

Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');

paragraph.replaceChildren(text);

text.splitText(5);

console.log(paragraph.childNodes.length);
// 2

paragraph.normalize();

console.log(paragraph.childNodes.length);
// 1

🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.

📣 Code Ready | #практика

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

Здесь - всё про ключевых игроков отрасли, государственное регулирование, инсайды и кейсы от отраслевых лидеров.

✅Серверная - канал об индустрии дата-центров: технологиях, инфраструктуре, облачных решениях, энергоэффективности и применении ЦОД в ключевых отраслях экономики.

✅Робосфера - канал об индустрии робототехники: технологии и тренды. Промышленные и сервисные роботы, коботы, автоматизация, ИИ, машинное зрение, автономные системы.

✅AI для бизнеса - всё об AI-решениях для бизнеса: внедрение, автоматизация, корпоративный ИИ, агенты.

✅ТехноРитейл - канал о производстве и продаже бытовой техники и электроники в России: бренды, e-com, маркетинг, retail tech.

Подписывайтесь, и эти каналы смогут изменить вашу жизнь к лучшему!

Реклама. Харламов А.Е. ИНН 712803816807. erid: 2W5zFJRaaAD

🎨 Цветовая палитра макета "Presentation Template 02"

HEX | RGB
#1BA58B | rgb(27, 165, 139)
#A61C1C | rgb(166, 28, 28)
#333333 | rgb(51, 51, 51)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 Hamburgers – набор анимированных иконок для меню. Анимация сделана за счет вращения, а также расширения иконки вниз и вверх.

Сайтодел | #сниппет #css

🖥 School App – дизайн приложения для школьников, который включает сочетания разных геометрических фигур и контрастные цвета.

Сайтодел | #макет #figma