🎨 Цветовая палитра макета "Mid Mod"

HEX | RGB
#F9BACB | rgb(249,186,203)
#B7B129 | rgb(183,177,41)
#4B442B | rgb(75,68,43)

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

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

CSS-вычисления теперь работают с auto и max-content!

Многие знают calc(), но он не умеет вычислять auto, max-content, fit-content и min-content.

Например, так написать нельзя:
.panel {
width: calc(max-content + 2rem);
}

Такое значение считается невалидным.

Для этого появился calc-size().
.panel {
width: calc-size(max-content, size + 2rem);
}

Теперь браузер сначала вычисляет max-content, а затем прибавляет к нему 2rem.

Это работает и с другими размерами, зависящими от содержимого.
.panel {
height: calc-size(auto, size + 1rem);
}

Полезно, когда элемент должен сохранить естественный размер содержимого, но при этом стать немного больше без JS.

🔥 calc-size() позволяет выполнять вычисления с auto, max-content и fit-content — то, чего обычный calc() делать не умеет.

📣 Code Ready | #совет

💾 Osaka Card – интерактивная карточка с подвижными элементами и фоном. Движение зависит от положения курсора, на элементы нельзя нажать.

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

📰 RSS Дайджест | 17 июля 2026

За прошедшие сутки собрал 29 материалов из 7 RSS-лент:

───

🤖 AI / LLMs

• Kimi K3 — главная тема! Китайская модель обошла Claude Fable и GPT-5.6 Sol в arena.ai, заняла 3-е место на ArtificialAnalysis
• Веса Kimi K3 выйдут 27 июля
• Дискуссия: "Anthropic and OpenAI не имеют секретного соуса"
• Open-weight модели приближаются к frontier

🔧 Tech

• LM Studio Bionic — AI-агент для open models
• Pydantic: "Human-in-the-Loop устарел"
• Microsoft Comic Chat стал open source
• GrapheneOS рекомендуют для жертв домашнего насилия

📰 Новости

• Waymo: San Francisco ужесточает правила после инцидента
• SpaceX прервал запуск Starship V3
• Coca-Cola: ransomware атаковала Fairlife
• Roblox запустил AI-генерацию игр в мобильном приложении
• Google Vids позволяет создавать видео с собой

🐍 Python

• Релизы Relatorio 1.0.0 и GooCalendar 1.0.0 в Tryton

───

📊 Источники: Hacker News, LocalLLaMA, TechCrunch, Planet Python

HEARTBEAT_OK

🤔 HTML5Book — большой учебник по HTML, CSS и JavaScript!

На сайте собрана большая база материалов по веб-разработке: подробные уроки по HTML5, CSS3, JavaScript и jQuery, а также удобные справочники

😰 5 AI-проектов, которые ты можешь собрать за выходные на Python

💬 Голосовой AI-ассистент (Whisper + GPT) – ассистент, который понимает речь и отвечает голосом.
💬 Чат-бот для документов (LangChain

😎 Найден финальный босс удалёнки

С пятницей товарищи! ☕️

💾 Hexagon Grid Ripple Effect – контейнер с шестиугольными карточками для иконок. При нажатии создается эффект волны.

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

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

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

Date.parse() и неочевидные проблемы при работе с датами!

При работе с датами в JavaScript часто используют Date.parse() или new Date(), чтобы преобразовать строковое значение в дату или получить time

Пачку офферов заказывали?

О всех трудоустройствах через ИИ-ассистента Софи ребята узнают от пользователей.

И какой же кайф, когда они делятся своими историями.

Вот так в чате узнали сразу о трех

🎨 Цветовая палитра макета "Virtual Reality Landing Page Concept"

HEX | RGB
#FAB9F1 | rgb(250,185,241)
#524686 | rgb(82,70,134)
#270631 | rgb(39,6,49)

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

Сайтодел

💾 Procedural Birb – маленькие птички, параметры для которых генерируются рандомно. Можно создать свою иллюстрацию, задав необходимые черты в окне настроек.

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

💾 Bokeh Background – объемный многослойный фон, который двигается вслед за курсором и меняет цвет при нажатии на экран.

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

💾 Hexagon Grid Ripple Effect – контейнер с шестиугольными карточками для иконок. При нажатии создается эффект волны.

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

💾 Papers – карточки в виде реалистичных, детализированных бумажных листков. Вращать бумажку можно правой кнопкой мыши.

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

Intersection Observer — отслеживаем появление элементов в области видимости!

Эффективная альтернатива scroll-событиям. Используется для ленивой загрузки, анимаций и инфинит-скролла.

Инициализируем наблюдатель:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});

Подключаем наблюдение:
document.querySelectorAll('.anim').forEach((el) => {
observer.observe(el);
});

Стили для появления:
.anim { opacity: 0; transform: translateY(30px); transition: 0.4s ease; }
.visible { opacity: 1; transform: none; }

🔥 Простая и масштабируемая практика, которую используют в продакшене: YouTube, Medium, e-commerce.

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

AI уже умеет писать код. Следующий шаг — поручить ему код-ревью.

Большинство разработчиков используют AI как продвинутый автокомплит. Но агенты уже умеют выполнять полноценные инженерные задачи: проверять pull request, искать баги, следить за стилем и безопасностью кода.

На бесплатном воркшопе покажут, как собрать такого агента своими руками и встроить его в GitHub.

Что будет на практике:

🔹 Настроите AI-ревьюера на Opencode и AGENTS.md;
🔹 Разберётесь, как работают MCP, Tools и Skills;
🔹 Подключите агента к репозиторию;
🔹 Протестируете его на реальном pull request;
🔹 Получите готовый workflow, который можно использовать после воркшопа.

Подойдёт разработчикам, тимлидам, DevOps, QA и всем, кто хочет внедрять AI в реальные процессы разработки, а не просто общаться с чат-ботами.

21 июля, 19:00 (МСК). Участие бесплатное.

Записаться →
#реклама
О рекламодателе