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

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

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

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

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

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

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

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

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

💾 Card Blur – эффект для неактивных карточек который возникает при наведении курсора. Здесь применяется не только размытие, но и затемнение элементов.

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

На Stepik запустили курс по вайбкодингу c Claude Code

Первым делом вы освоите базу Claude Code и научитесь проектировать полноценные приложения.

После этого перейдёте к более продвинутым инструментам и автоматизации:

➡️Разработаете собственные MCP-серверы и Claude Skills
➡️Автоматизируете разработку с помощью Agent Loops и хуков
➡️Освоите Claude Design, Cowork и Connectors
➡️Построите личную систему знаний на базе Obsidian + Claude Cowork
➡️Научитесь работать с таблицами при помощи Cowork
➡️Перестанете постоянно упираться в лимиты Claude

А в финале получите готовую дорожную карту, полезные лайфхаки и 7 практических способов обхода блокировок Claude Code в России.

🔥 В течении 48 часов действует скидка 25%

Element.animate() — управление композицией анимаций в браузере!

CSS-анимации удобны, пока элемент имеет одно состояние. Но когда несколько эффектов должны управляться из JavaScript, Web Animations API даёт больше контроля.

Например, несколько анимаций одного элемента могут существовать одновременно:
const fade = element.animate(
[
{ opacity: 0 },
{ opacity: 1 }
],
{
duration: 300
}
);

const move = element.animate(
[
{ transform: 'translateY(20px)' },
{ transform: 'translateY(0)' }
],
{
duration: 300
}
);

Браузер создаёт отдельные Animation-объекты и объединяет их эффекты при расчёте итогового стиля элемента.

У каждой анимации есть собственное состояние:
console.log(fade.playState);

console.log(move.currentTime);

currentTime позволяет управлять прогрессом вручную:
fade.currentTime = 150;

Анимация сразу перейдёт примерно к середине выполнения. Это полезно для синхронизации анимаций с внешним состоянием, например с прогрессом загрузки:
animation.currentTime =
progress * animation.effect.getTiming().duration;

Также Web Animations API позволяет изменять параметры уже созданного эффекта:
animation.effect.updateTiming({
duration: 1000
});

При этом не нужно пересоздавать анимацию. Отдельно стоит учитывать композицию свойств. Если два эффекта изменяют один и тот же параметр:
element.animate(
[
{ transform: 'translateX(100px)' }
],
{
duration: 1000
}
);

element.animate(
[
{ transform: 'scale(1.2)' }
],
{
duration: 1000
}
);

Оба эффекта работают с одним CSS-свойством transform. Итоговое поведение зависит от правил композиции анимаций, поэтому параллельное изменение одного свойства может дать неожиданный результат.

Для сложных случаев можно управлять композицией через composite:
element.animate(
[
{
transform: 'translateX(100px)'
}
],
{
duration: 500,
composite: 'add'
}
);

В этом режиме новое значение добавляется к существующему, а не заменяет его.

🔥 Element.animate() — это не просто замена CSS keyframes. Web Animations API предоставляет полноценную модель управления анимациями: состояние, время выполнения, изменение параметров и правила композиции эффектов.

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

👩‍💻 Один тег чтобы обернуть секцию с поиском или фильтром!

Тег <search> используется для обозначения секции страницы, которая содержит поиск или элементы фильтрации. Он помогает браузерам, поисковым системам и вспомогательным технологиям лучше понимать структуру страницы.

Использовать <search> можно для:
• формы поиска по сайту;
• фильтров каталога;
• панели поиска по таблицам или спискам;
• блока с настройками фильтрации.

Важно: тег относительно новый, поэтому поддержка в некоторых браузерах и вспомогательных технологиях пока развивается. При необходимости можно дополнительно использовать role="search".

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

✍️ Orbitron – геометрический шрифт без засечек с футуристическим дизайном. Он подходит для постеров, заголовков и обложек книг. Пример шрифта есть в дизайне "Virtual Reality Landing Page Concept"

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

😨 Про финального босса это я поторопился...

😎 Зацените сетап чувака

С добрым утром, хороших выходных!

⌨️ Запускаем бизнес

Интересный промт, который поможет сэкономить десятки часов анализа.

💬 ИИ исследует любую нишу,
💬 собирает данные о конкурентах,
💬 сравнивает цены,
💬 ищет незанятые возможности,
💬 помогает выбрать наиболее перспективное направление.

👍 Промт большой, сохраняем

#нейросеть #промт

🖥 Virtual Reality Landing Page Concept – футуристичный дизайн для лендинга про виртуальную реальность. Преобладают оттенки голубого, фиолетового и красного.

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

🐍 Осваиваете Python? Сделайте следующий шаг: из рядового разработчика в востребованного ИИ-специалиста.

В Университете Иннополис есть программа «Математические основы искусственного интеллекта», где упор делают не только на программирование, но и на фундамент, без которого сложно расти в машинном обучении и ИИ.

Что ждет студентов:
• сильная математическая подготовка
• работа с реальными данными
• три направления обучения — исследования, индустрия или робототехника
• практика в компании-партнёре на четвёртом курсе

Преподаватели — эксперты из МФТИ, ВШЭ, ИТМО, Яндекса, Сбера и Т-Банка.

🎓 Есть грантовый конкурс со скидкой вплоть до полного покрытия стоимости обучения.

👉 Посмотреть программу и оставить заявку можно здесь 👈

😎 Есть олды которые помнят этот вайб?

41% кода уже пишет AI. Пора научиться использовать это в свою пользу

Пока одни всё ещё учат синтаксис, другие собирают рабочие продукты с помощью Claude Code и AI.

Хекслет проведёт бесплатный воркшоп, где за один вечер вы создадите собственного Telegram-бота для изучения английского.

На практике покажут, как:

• работать с Claude Code;
• подключать Gemini API;
• создавать AI, который сам генерирует уроки;
• запускать полноценные продукты без месяцев разработки.

В результате у вас останется готовый Telegram-бот, которого можно использовать самому или развивать дальше.

28 июля, 19:00 (мск)

Бесплатное участие.

Зарегистрироваться ->
#реклама
О рекламодателе

Range API — работа с диапазонами DOM и фрагментами документа!

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

Range позволяет описать участок документа между двумя точками в DOM и выполнять операции именно над этим фрагментом. Важно понимать разницу между Selection и Range.

Selection хранит то, что пользователь выделил мышкой, а Range описывает конкретные границы этого выделения и даёт инструменты для работы с ним. Например, получим текущее выделение пользователя:
const selection = window.getSelection();

if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);

console.log(range.toString());
}

После получения Range мы можем работать с выбранным участком документа.

Метод toString() удобен, когда нужен только текст выделения. Но он возвращает обычную строку и не сохраняет HTML-структуру внутри этого фрагмента. Например, есть такой DOM:
<p>
Hello <strong>JavaScript</strong>
</p>

Если получить текст через:
range.toString();

мы получим: Hello JavaScript. Вся внутренняя структура будет потеряна, потому что результатом является просто строка.

Если нужно сохранить HTML-узлы внутри выделенного участка, используется cloneContents(). Этот метод создаёт копию выбранного фрагмента в виде DocumentFragment, сохраняя вложенные элементы:
const fragment = range.cloneContents();

document.body.appendChild(fragment);

Теперь вместе с текстом сохранится и структура:
<strong>JavaScript</strong>

Range можно не только получать из пользовательского выделения, но и создавать вручную. Например, можно программно выделить всё содержимое определённого элемента:
const element = document.querySelector('#editor');

const range = document.createRange();

range.selectNodeContents(element);

Теперь диапазон знает, какой фрагмент DOM нужно выделить.
Остаётся передать его в объект Selection, чтобы браузер показал это выделение пользователю:
const selection = window.getSelection();

selection.removeAllRanges();
selection.addRange(range);

После выполнения браузер выделит всё содержимое элемента. Но Range нужен не только для чтения выделений. С его помощью можно изменять DOM в конкретной позиции.

Например, заменить выделенный пользователем текст:
const range = window
.getSelection()
.getRangeAt(0);

const span = document.createElement('span');

span.textContent = 'Новый текст';

range.deleteContents();

range.insertNode(span);

Сначала deleteContents() удаляет выбранный фрагмент, а затем insertNode() вставляет новый элемент точно туда, где находился диапазон. Это особенно полезно в редакторах текста, где нужно сохранить структуру документа и позицию изменения.

Есть ещё один похожий метод — extractContents(). В отличие от cloneContents(), который создаёт копию, extractContents() забирает содержимое из DOM и удаляет его с текущего места:
const fragment = range.extractContents();

Полученный DocumentFragment можно затем вставить в другой участок документа. Range API используется внутри rich text редакторов, систем подсветки поиска, комментариев и любых интерфейсов, где требуется работать с отдельными частями документа.

🔥 Range API — инструмент для точной работы с фрагментами DOM: выделять, копировать, извлекать, удалять и заменять части документа без полной пересборки элемента.

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

💾 Houdini-animated Spinners – набор анимированных спиннеров. Они отличаются друг от друга небольшими деталями, если смотреть слева направо.

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