💾 Search With Morphing Button – поле ввода с изменяющейся иконкой. Если убрать фокус, то иконка возвращается к изначальному состоянию.

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

Почему innerHTML += иногда ведёт себя не так, как ожидаешь?

На первый взгляд это выглядит как самый простой способ что-то добавить в DOM — вроде бы просто дописал кусок HTML и всё. Но внутри браузер работает не так, и из-за этого появляются странные эффекты, когда вроде ничего особенного не сделал, а поведение страницы меняется.
const list = document.querySelector('.list');

list.innerHTML += `
Новый элемент
`;

По ощущениям просто добавили один li, но на деле браузер не дописывает HTML внутрь DOM. Он делает иначе: берёт текущее содержимое, сериализует его в строку, добавляет новый кусок и затем заново парсит HTML, пересоздавая DOM-узлы внутри контейнера.

Упрощённо это примерно вот так:
list.innerHTML = list.innerHTML + `
Новый элемент
`;

И уже отсюда становится понятно, почему начинают вылезать побочные эффекты.

Допустим, у тебя есть кнопка с обработчиком:
button.addEventListener('click', () => {
console.log('click');
});

container.innerHTML += `
Новый блок
`;

После такого обновления DOM-поддерево контейнера заменяется новым. Визуально ты видишь тот же интерфейс, но старые узлы уничтожаются и создаются заново. Поэтому все обработчики событий, навешанные через addEventListener, на этих элементах теряются.

Та же история с ссылками на элементы:
const item = document.querySelector('.item');

container.innerHTML += `
Новый блок
`;

console.log(item.isConnected); // false

item остаётся в переменной, но к текущему DOM он уже не привязан. Он существует как объект, но находится вне дерева документа, потому что был заменён старый поддерево контейнера.

И это особенно хорошо видно, когда начинаешь делать такие вещи в цикле:
for (let i = 0; i < 1000; i++) {
list.innerHTML += `${i}`;
}

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

Поэтому в реальной практике так обычно не делают и используют более прямые DOM-методы.
const li = document.createElement('li');

li.textContent = 'Новый элемент';

list.append(li);

Тут уже всё проще: создаёшь узел и просто добавляешь его в DOM, без пересборки контейнера.

Есть ещё вариант со строками, но без пересоздания всего содержимого:
list.insertAdjacentHTML(
'beforeend',
'Новый элемент'
);

Он вставляет кусок точечно в DOM, не пересоздавая существующие узлы, поэтому поведение стабильнее.

Если нужно добавить много элементов сразу, обычно используют DocumentFragment, чтобы не дёргать DOM по сто раз:
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = i;
fragment.appendChild(li);
}

list.appendChild(fragment);

Тут всё собирается в памяти и вставляется одной операцией, без промежуточных пересборок и перерисовок.

🔥 Коротко, суть в том, что innerHTML += — это не добавить элемент, как это выглядит интуитивно. Это скорее пересобери мне весь контейнер заново через HTML-строку и вставь результат. Поэтому в живых интерфейсах он иногда ведёт себя неожиданно и может неприятно влиять и на логику, и на производительность.

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

— Большинство людей ненавидят пробки
— Я обожаю... 😎

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

✍️ Anton – адаптация традиционного рекламного шрифта без засечек для экранов цифровых устройств. Пример можно увидеть в сниппете Template Plants Animated

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

💻 Stealth-Requests — Python библиотека, которая маскирует запросы под настоящий браузер

Автоматически имитирует поведение реального браузера, маскирует TLS-отпечаток, поддерживает прокси и сразу предоставляет удобные инструменты для парсинга HTML.

⚡️ Работает почти как обычный requests — менять код практически не нужно.
🛡 Маскирует запросы под Chrome или Safari, используя современные техники обхода детектирования.
🔄 Автоматически повторяет запросы при ошибках вроде 429, 503 и других временных ограничениях.

Сам извлекает:
* заголовок страницы;
* описание;
* автора;
* ссылки;
* изображения;
* email;
* HTML-таблицы;
* номера телефонов и д.р.

🧠 Может сразу преобразовать HTML в Markdown, а также вернуть готовый объект BeautifulSoup или lxml для дальнейшего парсинга.
🚀 Есть поддержка AsyncIO, прокси и сессий.

⚙️ Простая установка

pip install stealth_requests

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

Обычный GE...

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

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

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

🔥 Парсим Ozon

👨‍💻 Ozon-parser — софт, который автоматизирует сбор данных с Ozon — прямо у тебя под рукой!

С графическим интерфейсом и Telegram-ботом. Многопоточный сбор данных о товарах и продавцах.

📦 Что умеет:
💬 Забирает до 10 000 товаров из любой категории.
💬 Получает артикулы, названия, цены.
💬 Извлекает инфу о продавцах: ИНН, рейтинг, заказы.
💬 Работает через удобный GUI или Telegram-бота.
💬 Поддерживает многопоточность (в разы быстрее!).
💬 Делает экспорт в Excel/JSON и шлёт всё тебе в телегу.

⌨️ Управление на максималках:
— /start, /status, /settings — бот принимает команды
— Настраиваешь, парсишь, смотришь результат в Excel
— Всё логируется, всё под контролем

💬 Подходит для:
— E-commerce аналитиков
— Поставщиков
— Реселлеров
— Исследователей маркетплейсов
— И просто фанатов автоматизации

🚀 Запуск в несколько кликов

⚙️ Установка:
git clone https:/...

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

🔥 Парсим Ozon

👨‍💻 Ozon-parser — софт, который автоматизирует сбор данных с Ozon — прямо у тебя под рукой!

Как сегодня оплачивают ChatGPT, Claude, Cursor и другие зарубежные сервисы из РФ?

Через мутных ботов, ребят с Авито или сайты-прокладки. В итоге вы:
— Переплачиваете 20–30% сверху при каждой оплате.
— Отдаёте свои логины и пароли незнакомым людям.
— Рискуете получить бан аккаунта из-за чужой карты.

Картон убирает посредников. Теперь вы сами контролируете свои оплаты:
• Выпускаете виртуальную карту прямо в Telegram за 3 минуты.
• Пополняете криптой (USDT) или рублями через СБП.
• Оплачивайте любые сервисы за 5 минут.

Вы сами оплачиваете нейросети, хостинги, отели и любые подписки. Без левых комиссий. Apple Pay работает везде, где есть бесконтактная оплата.

Пополнение и вывод рублей - бесплатно. Пополнение криптой - 2%. Карта — ваша, платите сами.

Хватит кормить «помогаторов» и переплачивать за каждую подписку.

Забирайте карту здесь:
👉 Открыть Картон
👉 Открыть Картон
👉 Открыть Картон

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

💾 Boxy Preloaders – лоадеры из анимированных градиентных прямоугольников. Каждый элемент выглядит мягким и пластичным, а также меняет свой цвет.

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

🔥 Парсим Ozon

👨‍💻 Ozon-parser — софт, который автоматизирует сбор данных с Ozon — прямо у тебя под рукой!

С графическим интерфейсом и Telegram-ботом. Многопоточный сбор данных о товарах и продавцах.

📦 Что умеет:
💬 Забирает до 10 000 товаров из любой категории.
💬 Получает артикулы, названия, цены.
💬 Извлекает инфу о продавцах: ИНН, рейтинг, заказы.
💬 Работает через удобный GUI или Telegram-бота.
💬 Поддерживает многопоточность (в разы быстрее!).
💬 Делает экспорт в Excel/JSON и шлёт всё тебе в телегу.

⌨️ Управление на максималках:
— /start, /status, /settings — бот принимает команды
— Настраиваешь, парсишь, смотришь результат в Excel
— Всё логируется, всё под контролем

💬 Подходит для:
— E-commerce аналитиков
— Поставщиков
— Реселлеров
— Исследователей маркетплейсов
— И просто фанатов автоматизации

🚀 Запуск в несколько кликов

⚙️ Установка:
git clone https:/...

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

🔥 Парсим Ozon

👨‍💻 Ozon-parser — софт, который автоматизирует сбор данных с Ozon — прямо у тебя под рукой!

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

HEX | RGB
#EFE4C4 | rgb(239,228,196)
#C2EFE8 | rgb(194,239,232)
#B4D5FC | rgb(180,213,252)

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

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

💀 Кажется началось...

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