🎨 Цветовая палитра макета "Fitness Mobile Ios App"

HEX | RGB
#F9F3E4 | rgb(249,243,228)
#F8C06D | rgb(248,192,109)
#3B867F | rgb(59,134,127)

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

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

💾 Check Micro Animation – чекбокс с анимацией при нажатии. Элемент имеет градиентную заливку, которая заполняет всю его площадь в активном состоянии.

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

CSS.escape() — экранирование динамических значений для CSS-селекторов!

При работе с DOM часто приходится искать элементы по динамическим значениям: id, class, значениям атрибутов. И здесь есть один важный момент: querySelector() и querySelectorAll() принимают не просто строки, а полноценные CSS-селекторы.

Поэтому если часть селектора формируется динамически, нужно учитывать правила синтаксиса CSS. Например:
const id = "user:123";

const element = document.querySelector(
`#${id}`
);

После подстановки браузер получает:
#user:123

На первый взгляд кажется, что мы ищем элемент с id="user:123".

Но для CSS символ : имеет специальное значение. Он используется для псевдоклассов:
:hover
:focus
:checked

Поэтому CSS-парсер воспринимает : не как часть значения, а как элемент синтаксиса селектора.

Для таких случаев существует стандартный метод CSS.escape():
const id = "user:123";

const element = document.querySelector(
`#${CSS.escape(id)}`
);

Теперь значение будет преобразовано в корректный CSS-идентификатор:
#user\:123

Браузер понимает, что : является частью значения, а не специальной конструкцией CSS. Такая проблема возникает не только с двоеточием.

CSS имеет множество специальных символов, которые могут изменить смысл селектора:
const id = "product.item#42";

const element = document.querySelector(
`#${CSS.escape(id)}`
);

Без экранирования символы ., # и другие будут интерпретироваться как часть CSS-селектора.

То же самое относится к динамическим классам:
const className = "theme:dark";

const element = document.querySelector(
`.${CSS.escape(className)}`
);

CSS.escape() работает согласно правилам CSS-идентификаторов и возвращает строку, которую можно использовать внутри селектора:
CSS.escape("hello world");
// "hello\ world"

CSS.escape("item.value");
// "item\.value"

CSS.escape("a:b");
// "a\:b"

До появления этого метода часто использовали ручное экранирование:
value.replace(/:/g, "\\:");

Но такой подход быстро становится неудобным. CSS имеет много специальных случаев: разные символы, пробелы, цифры в начале идентификаторов и другие правила. CSS.escape() переносит эту логику на стандартный API браузера.

Использовать его стоит в местах, где динамическое значение становится частью CSS-селектора:
document.querySelector()

document.querySelectorAll()

element.matches()

element.closest()

Важный момент: CSS.escape() не является механизмом защиты данных.

Он решает только задачу корректного экранирования значения для CSS-селектора. Например:
element.innerHTML = value;

— это уже другая область: HTML и потенциальные XSS-риски. Там используются другие механизмы защиты. Если вы работаете с динамическими id, классами или значениями, которые приходят извне (например, из API), CSS.escape() помогает избежать ошибок парсинга и сохранить ожидаемое поведение DOM API.

🔥 CSS.escape() — хороший способ подготовить динамические значения перед использованием внутри CSS-селекторов.

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

Опа, тут бывший сеньор одного из IT-отделов Яндекса Игорь Никитин выкатил целый канал про Python — и это лучшее, что есть в рунете по теме.

Качественные гайды. Советы от известных прогеров. Тематические мемасы. Короче, ничего лишнего.

Хватит душить питона, учись его кодить: https://t.me/+IzIPzvoa7p40ZTUy 🐍

👩‍💻 Группируем заголовок и обычный текст!

Тег <hgroup> объединяет основной заголовок страницы или раздела с дополнительным текстом, который его сопровождает — например, подзаголовком или кратким описанием.

Чаще всего внутри <hgroup> размещают:

• один из заголовков <h1>–<h6>;

• дополнительные элементы текста, например <p> с пояснением.

Он помогает логически связать несколько элементов заголовка, сохраняя структуру документа более понятной для браузеров и вспомогательных технологий. Не используйте <hgroup>, если вы хотите показать два независимых заголовка, — лучше оформить это через <section> или <article>

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

🐙 PeerTube – видеохостинг с открытым исходным кодом, созданный на Typescript. Его главное отличие от других платформ – децентрализованное хранение данных.

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

💾 Wave – анимация загрузки, похожая на волну. Элемент построен из линий, которые меняют свою длину и тем самым создают очертания предмета.

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

RSS дайджест готов! Публикую в канал @myselfcoding:

───

📡 RSS Дайджест | 22 июля 2026

🔥 Главное:

🔹 OpenAI взломала Hugging Face — компания признала, что агент из внутренней тестовой оценки случайно взломал платформу. Теперь партнёрство для устранения уязвимости.

🔹 Laguna S 2.1 — новая модель от poolside (120B параметров), дешевле DeepSeek V4 Flash, лучше V4 Pro. Уже доступна квантизация от Unsloth.

🔹 Gigatoken — открытый токенизатор, работает в 100x быстрее Tiktoken.

🔹 Anthropic заплатит $1.5B — рекордный штраф за использование книг для обучения Claude. Крупнейшее подобное решение в истории США.

🔹 Kimi K3 — новая модель от Fireworks, конкурирует с Fable, достигает SoTA результатов.

───

💼 Tech:

• Jack Dorsey запустил Buzz — конкурент Slack для команд и AI-агентов
• Meta тестирует AI bedtime story — приложение для создания историй на ночь
• LG будет блокировать прокси в smart TV приложениях
• Apple + Klarna запустили лизинг iPhone и Mac

───

🐍 Python: Python 3.15.0 beta 4 уже доступен

───

Источники: Hacker News, LocalLlama, TechCrunch, Python Insider, Baeldung, CSS-Tricks

───

Дайджест опубликован ✅

HEARTBEAT_OK

👩‍💻 Можно ли стилизовать текст, к которому пользователь перешёл по ссылке?

::target-text — псевдоэлемент, который применяется к тексту, найденному через текстовый фрагмент в URL вида #:~:text=.... Он позволяет задать стили выделения, которые браузер покажет после перехода по такой ссылке.

Примеры использования:

• изменить фон выделенного текста;

• добавить собственный цвет текста;

• настроить контрастное выделение вместо стандартного.

Стандартные якоря #id подсвечивают целевой элемент. Текстовые фрагменты #:~:text=... указывают на конкретную строку текста. ::target-text позволяет настраивать стиль этого автоматического выделения (обычно это жёлтая подсветка от браузера), чтобы он соответствовал дизайну.

📣 Code Ready | #свойство

GPT, CLAUDE И GEMINI В 20 РАЗ ДЕШЕВЛЕ? 🌡

Один ключ - и у вас доступ ко всему зоопарку: GPT, Claude, Gemini, Grok, DeepSeek. Без пяти личных кабинетов и головной боли💗

🔜 Claude работает стабильно Мы знаем, что на большинстве левых сервисов Anthropic постоянно отваливается. Тут же Claude Code и Cursor держат сессии без обрывов. Это мастхэв для вайбкодеров

🔜 Бесплатные модели - Qwen3 Coder и Qwen3 Next 80B доступны абсолютно бесплатно ($0 за 1 млн токенов). Пользуйся сколько влезет, не потратив ни цента. Идеально для тестов и простых задач

🔜 GPT-5.6 Sol — всего $0,10 за 1 млн токенов Оплата строго по факту: пополнил баланс — платишь ровно за то, что использовал. Никаких скрытых списаний

💻 КАК НАЧАТЬ =>
Просто вставь ключ в Claude Code, Codex, Cursor или OpenCode - всё заработает через минуту. Распознавание речи, синтез, генерация картинок - всё тем же одним ключом. Удобство уровня "бог" 🙈

🎁 БОНУС ДЛЯ НОВЫХ =>
Для новых пользователей есть бонус за регистрацию и ->...

Перейти на оригинальный пост

💀 Одна фотография — и у вас появляется живой AI-аватар для стримов

PersonaLive — открытый инструмент для анимации портретов в реальном времени. Загружаете фотографию человека, включаете веб-камеру или подаёте управляющее видео — и персонаж начинает повторять мимику, движения головы и выражение лица.

В отличие от обычных генераторов «говорящих фото», проект рассчитан на непрерывную потоковую генерацию: аватар может работать длительное время без постоянной нарезки ролика на отдельные фрагменты.

Что умеет:
🔣 Оживляет портрет по движениям человека из видео или веб-камеры.
🔣 Переносит мимику, повороты головы, положение и масштаб лица.
🔣 Генерирует длинные анимации в потоковом режиме.
🔣 Позволяет менять исходное изображение прямо в WebUI.
🔣 Поддерживает офлайн-обработку готовых видео и онлайн-режим для трансляций.
🔣 Может работать через ComfyUI.
🔣 Поддерживает ускорение через TensorRT, которое, по данным авторов, способно примерно вдвое ускорить инференс, хотя возможна...

Перейти на оригинальный пост

😎 21-летний бразилец создал с помощью ИИ виртуальную девушку-строителя и начал продавать видео с ее участием.

Результат оказался впечатляющим:
💬 764 человека оформили подписку по $10, общая выручка составила $7640.

На генерацию материалов с помощью Claude было потрачено всего $200 баксов.

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

💾 Inner Glow Card – прозрачная карточка с внутренней неоновой подсветкой. Рамка имеет волнообразную анимацию, цвета плавно перетекают друг в друга.

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

🖥 Sales Dashboard – дизайн для отображения статистики. Его особенности – цветные карточки, яркая инфографика и 3D-изображения людей.

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

🎨 Цветовая палитра макета "Meal Planner UI Kit"

HEX | RGB
#EEE2FF | rgb(238,226,255)
#8A47EB | rgb(138,71,235)
#27005F | rgb(39,0,95)

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

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

🖥 Fitness Mobile Ios App – дизайн мобильного приложения для фитнеса. Акцент тут сделан на шрифтах, контрастных оттенках и сильно скругленных элементах.

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

🐙 Fabric.js – библиотека JavaScript для работы с <canvas> в HTML. Она поддерживает SVG-парсинг и позволяет создавать интерактивные объекты на холсте.

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

✍️ Zeyada – рукописный шрифт с необычным соединением букв, который не похож на стандартный курсив. Назван в честь молодой женщины из Эфиопии. Пример шрифта можно увидеть в сниппете Papers

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

🎨 Цветовая палитра макета "Fender Bender Guitar Tune"

HEX | RGB
#F9BA1D | rgb(249,186,29)
#FA00FF | rgb(250,0,255)
#4383FF | rgb(67,131,255)

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

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

🌟 Да, опять... Из Госуслуг хотят сделать замену Telegram и превратиться в полноценную соцсеть.

Что может появиться:
💬 Семейные чаты, группы и сообщества.
📰 Персональная новостная лента.
😂 Афиша мероприятий и городских событий.
🏆 Система достижений и наград за различные действия внутри платформы.

«Госуслуги» могут стать единым цифровым центром, где можно не только получать государственные услуги, но и общаться, следить за событиями и решать повседневные вопросы.

Пришло время делать новый MAX...

С добрым утром! 🫡