Сайтодел | GitHub, Верстка, Сайты, FullStack pinned a GIF

✍️ EB Garamond – классический шрифт с засечками, вдохновленный шрифтами 1500-х годов. Подходит для небольших надписей. Шрифт можно увидеть в заголовках однотонных карточек в макете Colour Palettes/Moodboards

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

💀— 2026: Роботы будут лечить людей, летать в космос и помогать нам развиваться!
😂 — Роботы в 2026: ...

🎨 Цветовая палитра макета "Beauty And Skincare Landing Page"

HEX | RGB
#D1E3E3 | rgb(209,227,227)
#93CCDF | rgb(147,204,223)
#2B6477 | rgb(43,100,119)

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

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

🐙 Front End Web Development Resources – репозиторий с полезными материалами для разработчиков. Здесь есть ссылки на полезные статьи, блоги, Youtube-каналы, фреймворки и библиотеки иконок.

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

🔥 Создание реалистичных AI-видео постепенно становится доступным каждому.

LongCat-Video — открытая нейросеть с 13,6 млрд параметров, которая умеет не только генерировать видео по тексту, но и создавать говорящих аватаров, анимировать фотографии, продолжать существующие ролики и синхронизировать речь с движением губ. Всё это можно запускать локально.

Возможности:
🔣Text-to-Video — создание видео по текстовому описанию.
🔣Image-to-Video — оживляет обычные изображения.
🔣AI-аватары — создание говорящих персонажей по фотографии и аудио.
🔣Липсинк высокого качества — синхронизация речи и движения губ с использованием Whisper Large в новой версии Avatar 1.5.
🔣Поддержка нескольких персонажей и нескольких аудиодорожек одновременно.
🔣Работает не только с людьми, но и с аниме, животными и стилизованными персонажами.
🔣Генерирует длинные ролики без заметной деградации качества и «дрейфа» цветов — одна из ключевых особенностей проекта.
🔣Генерация видео 720p, 30 FPS с...

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

0nix — Новая экосистема для профи.

Здесь не просто форум. Это готовая биржа, где заказчики находят исполнителей, а исполнители — живые деньги.

🛡Для кибербезопасников: Threat Intelligence, Осинтеров , Геоинтеров, Red Team, разработчиков инструментов. Ваша аудитория ждет ваши услуги.

💻 Для разработчиков и дизайнеров: Отдельные разделы с заказами на разработку, дизайн и графику. Портфолио — в топ!

Условия для первых участников: Минимальные комиссии на сделки, быстрый арбитраж и модерация.

Регистрируйся и забирай свою скидку на привилегии уже сегодня → 0nix.cc , 0nix.top

Почему чтение offsetHeight иногда тормозит интерфейс?

На первый взгляд кажется, что получить высоту элемента — это самая обычная операция. Ты просто читаешь свойство и получаешь число. Но внутри браузера всё немного интереснее.

Например:
const box = document.querySelector('.box');

box.style.width = '500px';

console.log(box.offsetHeight);

Кажется, что мы просто изменили ширину и прочитали высоту. Но есть нюанс. После изменения DOM или CSS браузер не обязан сразу пересчитывать размеры элементов. Наоборот, современные движки стараются откладывать такие вычисления, чтобы не делать лишнюю работу после каждого изменения.

Упрощённо это выглядит так:
box.style.width = '500px';

// браузер пока просто запомнил изменение

console.log(box.offsetHeight);

// здесь уже нужны реальные размеры,
// поэтому приходится пересчитать layout

Именно поэтому чтение некоторых свойств может заставить браузер синхронно обновить style и layout, если после изменений они ещё не актуальны.

Например:
element.offsetWidth;
element.offsetHeight;
element.clientWidth;
element.clientHeight;
element.scrollHeight;

element.getBoundingClientRect();

Но важно понимать: сами по себе эти свойства не медленные. Если layout уже актуален, браузер просто вернёт готовое значение.

Проблемы обычно начинаются, когда чтение размеров смешивают с изменением стилей внутри цикла:
const items = document.querySelectorAll('.item');

items.forEach(item => {
item.style.height = '100px';

console.log(item.offsetHeight);
});

На десяти элементах ты, скорее всего, ничего не заметишь. Но если их сотни или тысячи, можно получить forced synchronous layout — ситуацию, когда JavaScript заставляет браузер выполнять дорогие вычисления прямо во время выполнения скрипта.

Особенно неприятно это становится в анимациях:
function animate(elements) {
elements.forEach(element => {
element.style.width = '200px';

const height = element.offsetHeight;

element.style.height = `${height}px`;
});
}

Если такой код выполняется каждый кадр, браузеру приходится постоянно переключаться между изменением стилей и пересчётом layout. В результате главный поток занят вычислениями, а пользователь начинает замечать рывки и пропуски кадров.

Поэтому один из самых простых приёмов — разделять запись и чтение. Вот так плохо:
items.forEach(item => {
item.style.width = '200px';
console.log(item.offsetHeight);
});

Лучше будет так:
items.forEach(item => {
item.style.width = '200px';
});

items.forEach(item => {
console.log(item.offsetHeight);
});

Так браузер сможет объединить изменения и выполнить один пересчёт вместо множества лишних. Для визуальных изменений также часто используют requestAnimationFrame, потому что он запускает код перед следующим циклом отрисовки браузера. Но сам по себе requestAnimationFrame не избавляет от layout thrashing. Если внутри его callback продолжать чередовать изменения DOM и чтение размеров, синхронные перерасчёты всё равно останутся.

🔥 Если коротко: проблема не в offsetHeight, а в том, когда ты его читаешь. После изменений DOM или CSS он может заставить браузер синхронно пересчитать layout. Именно чередование записей и чтений чаще всего становится причиной лишних тормозов.

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

💾 X-Ray Text Hover Effect – эффект "рентгена" для текста. При наведении курсора он показывает только обводку букв и убирает их заливку.

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

💾 Bouncy Star Rating – прыгающие звездочки для рейтинга. Если между двумя нажатыми элементами есть другие, то анимируются сразу все последние звездочки.

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

😂 Страшная правда об AI, которую вам никто не рассказывает

С добрым утром, хорошего дня! ☕️

🤔 Awesome CSS — большая подборка ресурсов по CSS!

Здесь собраны качественные статьи, инструменты, библиотеки и другие полезные ресурсы для работы со стилями. Особенно полезен тем, кто хочет лучше разобраться в современных возможностях CSS, быстрее находить решения для вёрстки и держать под рукой материалы. Хорошая база как для обучения, так и для повседневной разработки.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

‌💬 Scryptian — крутая утилита, которая работает поверх любых приложений и мгновенно переводит текст на понятный вам язык.

Достаточно выделить текст, нажать горячую клавишу — и ИИ мгновенно выполнит нужную задачу прямо там, где вы работаете. Никаких вкладок, браузеров и копирования текста в ChatGPT.

Возможности
💬 Перевод текста прямо в Telegram, Discord, Word, PDF, браузере и любых других приложениях.
💬 Исправление орфографии, пунктуации и грамматики.
💬 Улучшение стиля текста и повышение читаемости.
💬 Мгновенное создание краткого саммари длинных документов.
💬 Изменение тона текста — дружелюбный, официальный, деловой и другие.
💬 «Очеловечивание» текста, написанного нейросетью.

Где пригодится?
🟢Переписка с иностранными заказчиками.
🟢Работа с технической документацией.
🟢Перевод PDF любого объема.
🟢Написание писем.
🟢Проверка английского текста.
🟢Учеба и работа с большими статьями.
🟢Любые задачи, где приходится постоянно переключаться между приложениями.

👍 Сохраняем и пробуем бесплатно!

#python #soft #github

🐍 Python — универсальный ключ от многих ИТ-дверей: от веб-разработки до машинного обучения

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

А ещё — помощь с трудоустройством. За время обучения вы:

🔸 научитесь упаковывать опыт в резюме;
🔸 пройдёте тестовые технические интервью;
🔸 посетите встречи с экспертами Сбера, Яндекса и Т-Банка;
🔸 сможете попасть на стажировку;
🔸 получите год карьерной поддержки после выпуска.

Сейчас на курс действует скидка 50%, а с промокодом IT10JULY цена станет ещё на 10% ниже. Плюсом подарим 15 000 видео при покупке до 14 июля
Узнать подробнее и записаться → ссылка

P. S. Ребята помогут оформить налоговый вычет, а это ещё –13% от стоимости.

Реклама. ООО “Нетология” ОГРН 1207700135884 Erid: 2VSb5xbZxkA

💾 3D Preloader – необычный 3D-лоадер с элементами в виде подвижных столбиков. Чем выше столбик, тем ярче он окрашивается в синий цвет.

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

💻 Не свети свой настоящий email где попало

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

Сервис:
🟢Создает временный email за пару секунд.
🟢Принимает письма, ссылки активации и коды подтверждения.
🟢Защищает основной почтовый ящик от спама и утечек.
🟢Максимум приватности — минимум лишних данных о вас.
🟢Идеально подходит для регистрации, тестирования сервисов и любых разовых задач.

✅ Сохраняем и пробуем бесплатно!

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

#soft

❤️‍🔥"Это разъ*бный сетап, бро!" 😤

Так сказал мой друг из Африки, когда увидел этот стол)
Не знаю уж че за сетап, меня зовут Саша и качественную необычную мебель из натурального дерева я делаю уже больше 12-ти лет, столько же занимаюсь и темой здоровья.

Когда я услышал, что до 10% смертности связано с сидячим образом жизни, меня это поразило и я задался целью делать максимально функциональные и полезные рабочие пространства, ибо геморрой в 30 это конечно довольно нишево, но все же сомнительно 😂

Ну а собрать такой комплект под свои задачи и при этом сразу прикинуть цены вы можете в удобном Mini App конструкторе ➕

💾 3D Preloader – необычный 3D-лоадер с элементами в виде подвижных столбиков. Чем выше столбик, тем ярче он окрашивается в синий цвет.

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

Как убрать лишние классы для пустых блоков?

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

Если данных нет — элемент остаётся пустым, но продолжает занимать место.

Обычно это решают через JS или условный рендеринг.
.error {
display: none;
}

А потом отдельно добавляют класс при появлении контента.

Но CSS умеет определять пустые элементы самостоятельно.
.error:empty {
display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет.

Можно делать и обратную логику.
.card:not(:empty) {
padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент.

Особенно удобно для:
error,
hint,
description,
badge

Где содержимое может появляться динамически.

🔥 :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS.

📣 Code Ready | #совет

❤️‍🔥"Это разъ*бный сетап, бро!" 😤

Так сказал мой друг из Африки, когда увидел этот стол)
Не знаю уж че за сетап, меня зовут Саша и качественную необычную мебель из натурального дерева я делаю уже больше 12-ти лет, столько же занимаюсь и темой здоровья.

Когда я услышал, что до 10% смертности связано с сидячим образом жизни, меня это поразило и я задался целью делать максимально функциональные и полезные рабочие пространства, ибо геморрой в 30 это конечно довольно нишево, но все же сомнительно 😂

Ну а собрать такой комплект под свои задачи и при этом сразу прикинуть цены вы можете в удобном Mini App конструкторе ➕

Как убрать лишние классы для пустых блоков?

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

Если данных нет — элемент остаётся пустым, но продолжает занимать место.

Обычно это решают через JS или условный рендеринг.
.error {
display: none;
}

А потом отдельно добавляют класс при появлении контента.

Но CSS умеет определять пустые элементы самостоятельно.
.error:empty {
display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет.

Можно делать и обратную логику.
.card:not(:empty) {
padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент.

Особенно удобно для:
error,
hint,
description,
badge

Где содержимое может появляться динамически.

🔥 :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS.

📣 Code Ready | #совет