This media is not supported in your browser
VIEW IN TELEGRAM
💾 Custom Keyboard Landing Page – лендинг с вращающимся 3D-изображением клавиатуры. При скролле запускается анимация двух частей страницы.
Сайтодел | #сниппет #css
Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Agriculture Landing Website Templates"
Сайтодел | #палитра
HEX | RGB #D4D4BE | rgb(212,212,190)
#49A760 | rgb(73,167,96) #1F4E3D | rgb(31,78,61)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
🎁 РАЗДАЕМ 50 БЕСПЛАТНЫХ ИНВАЙТОВ ДЛЯ ИИ-ПОМОЩНИКА "НИКА" 🌌 https://t.me/nikaagentru_bot?start=i_NIKA_WELCOME_2026 🤍
По сути — бесплатная нейросеть с кучей тулов, пользуйтесь!
Бот Ника: @nikaagentru_bot
А ЕЩЕ ЕСТЬ ВЭБ ВЕРСИЯ КОТОРАЯ РАБОТАЕТ БЕЗ ВПН:
https://nikaagent.ru
инвайт код: NIKA_WELCOME_2026
⚡️ Раздаём 50 бесплатных инвайтов в ИИ-помощника, у которого под капотом одна из самых сильных ЛЛМ — и невероятно широкий функционал:
🔎 Поиск всего на свете — от инфы до квартир на Циан
🎨 Генерация файлов, картинок и даже стикеров (!)
📊 Анализ данных и документов — кидаешь файл, получаешь отчёт или презентацию
🛒 Заказ продуктов прямо из чата — Вкуссвилл и Самокат уже подключен
🌐 Браузерный агент — сама зайдёт на сайт, забронирует, заполнит форму
📞 Позвонит и напишет за тебя — голосом или письмом
🧩 Декомпозиция — разбивает сложный запрос на части и делает всё параллельно
🧠 Память о тебе + 🕶 инкогнито для личных тем
👥 Можно добавить в групповой чат — будет...
Перейти на оригинальный пост
По сути — бесплатная нейросеть с кучей тулов, пользуйтесь!
Бот Ника: @nikaagentru_bot
А ЕЩЕ ЕСТЬ ВЭБ ВЕРСИЯ КОТОРАЯ РАБОТАЕТ БЕЗ ВПН:
https://nikaagent.ru
инвайт код: NIKA_WELCOME_2026
⚡️ Раздаём 50 бесплатных инвайтов в ИИ-помощника, у которого под капотом одна из самых сильных ЛЛМ — и невероятно широкий функционал:
🔎 Поиск всего на свете — от инфы до квартир на Циан
🎨 Генерация файлов, картинок и даже стикеров (!)
📊 Анализ данных и документов — кидаешь файл, получаешь отчёт или презентацию
🛒 Заказ продуктов прямо из чата — Вкуссвилл и Самокат уже подключен
🌐 Браузерный агент — сама зайдёт на сайт, забронирует, заполнит форму
📞 Позвонит и напишет за тебя — голосом или письмом
🧩 Декомпозиция — разбивает сложный запрос на части и делает всё параллельно
🧠 Память о тебе + 🕶 инкогнито для личных тем
👥 Можно добавить в групповой чат — будет...
Перейти на оригинальный пост
This media is not supported in your browser
VIEW IN TELEGRAM
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сгенерировать сайт через Giga, DeepSeek, ChatGPT
- Сверстать страницу на HTML + CSS по Figma макету
- Оживить её логикой на JavaScript
- Превратить сайт во фронтенд-приложение на Angular
- Подключить backend и выложить проект на хостинг
Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд: «Фронтенд в 2026 году: стоит ли входить сейчас и что делать новичку в эпоху ИИ».
Стартуем завтра.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сгенерировать сайт через Giga, DeepSeek, ChatGPT
- Сверстать страницу на HTML + CSS по Figma макету
- Оживить её логикой на JavaScript
- Превратить сайт во фронтенд-приложение на Angular
- Подключить backend и выложить проект на хостинг
Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд: «Фронтенд в 2026 году: стоит ли входить сейчас и что делать новичку в эпоху ИИ».
Стартуем завтра.
Почему scroll иногда внезапно прыгает сам по себе?
Добавляешь новый контент сверху и браузер внезапно меняет
Обычно проблема появляется при:
prepend,
lazy-image,
dynamic-content
Браузер пытается помочь и автоматически удерживает пользователя на прежнем месте через
Но в динамических интерфейсах это часто создаёт хаос.
.chat {
overflow-anchor: none;
}
Теперь браузер перестаёт вмешиваться в
Особенно полезно для:
chat,
feed,
virtual-list,
infinite-scroll
Где контент постоянно догружается или меняется.
Можно отключать
.loader {
overflow-anchor: none;
}
Например у
🔥
📣 Code Ready | #совет
Добавляешь новый контент сверху и браузер внезапно меняет
scroll-position. Особенно часто это ломает chat, infinite-feed и lazy-load layout.Обычно проблема появляется при:
prepend,
lazy-image,
dynamic-content
Браузер пытается помочь и автоматически удерживает пользователя на прежнем месте через
scroll anchoring.Но в динамических интерфейсах это часто создаёт хаос.
.chat {
overflow-anchor: none;
}
Теперь браузер перестаёт вмешиваться в
scroll-position контейнера.Особенно полезно для:
chat,
feed,
virtual-list,
infinite-scroll
Где контент постоянно догружается или меняется.
Можно отключать
anchoring точечно даже у отдельных элементов..loader {
overflow-anchor: none;
}
Например у
skeleton, lazy-image или рекламных блоков.🔥
overflow-anchor: none убирает один из scroll-багов в динамических интерфейсах.📣 Code Ready | #совет
😎 Парсим ЛЮБОЙ бизнес из Гугл карт и зарабатываем на данных
✅ Собираем адреса, телефоны, сайты, рейтинги, отзывы и другую полезную информацию из тысяч компаний!
💰 Тонны готовых данных можно использовать в коммерческих целях:
💬 поиска клиентов,
💬 анализа конкурентов,
💬 создания собственных баз компаний,
💬 CRM-систем,
💬 телеграм-ботов,
💬 маркетинговых исследований и других задач автоматизации бизнеса.
https://youtu.be/fpFgpqnBpsE
👍 Спасибо за просмотр и поддержку!
#youtube
✅ Собираем адреса, телефоны, сайты, рейтинги, отзывы и другую полезную информацию из тысяч компаний!
💰 Тонны готовых данных можно использовать в коммерческих целях:
💬 поиска клиентов,
💬 анализа конкурентов,
💬 создания собственных баз компаний,
💬 CRM-систем,
💬 телеграм-ботов,
💬 маркетинговых исследований и других задач автоматизации бизнеса.
https://youtu.be/fpFgpqnBpsE
👍 Спасибо за просмотр и поддержку!
#youtube
😎 Парсим ЛЮБОЙ бизнес из Гугл карт и зарабатываем на данных
✅ Собираем адреса, телефоны, сайты, рейтинги, отзывы и другую полезную информацию из тысяч компаний!
💰 Тонны готовых данных можно использовать в коммерческих целях:
💬 поиска клиентов,
💬 анализа конкурентов,
💬 создания собственных баз компаний,
💬 CRM-систем,
💬 телеграм-ботов,
💬 маркетинговых исследований и других задач автоматизации бизнеса.
https://youtu.be/fpFgpqnBpsE
👍 Спасибо за просмотр и поддержку!
#youtube
✅ Собираем адреса, телефоны, сайты, рейтинги, отзывы и другую полезную информацию из тысяч компаний!
💰 Тонны готовых данных можно использовать в коммерческих целях:
💬 поиска клиентов,
💬 анализа конкурентов,
💬 создания собственных баз компаний,
💬 CRM-систем,
💬 телеграм-ботов,
💬 маркетинговых исследований и других задач автоматизации бизнеса.
https://youtu.be/fpFgpqnBpsE
👍 Спасибо за просмотр и поддержку!
#youtube
🖥 Travel & Hotel Booking Light Mobile App – дизайн мобильного приложения для бронирования отелей. Акцент здесь сделан на спокойных серо-бирюзовых оттенках и скругленных углах.
Сайтодел | #макет #figma
Сайтодел | #макет #figma
⚽ Пропустил матч? Не пропускай голы!
🏆 Голы любимых сборных ЧМ-2026
🔥 Лучшие голы чемпионатов мира всех времен
📲 Всё в одном Telegram-боте
Выбирай команду и получай самые яркие видеомоменты за секунды!
📢 InsideAd
🏆 Голы любимых сборных ЧМ-2026
🔥 Лучшие голы чемпионатов мира всех времен
📲 Всё в одном Telegram-боте
Выбирай команду и получай самые яркие видеомоменты за секунды!
📢 InsideAd
День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю,...
Перейти на оригинальный пост
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю,...
Перейти на оригинальный пост
📂 Напоминалка для работы браузера и сети!
Например, когда вводишь
На картинке — полный путь от ввода URL до отображения сайта.
Сохрани, чтобы быстро освежить в памяти, как работает Web под капотом!
📣 Code Ready | #ресурс
Например, когда вводишь
google.com, браузер сначала ищет IP-адрес через DNS, затем устанавливает TCP/TLS-соединение, отправляет HTTPS-запрос и только после этого начинает рендерить страницу.На картинке — полный путь от ввода URL до отображения сайта.
Сохрани, чтобы быстро освежить в памяти, как работает Web под капотом!
📣 Code Ready | #ресурс
📝 Собран список свежих сервисов и нейронок за неделю:
На канале «Будущее сегодня» публикуют все последние новости из мира технологий для русскоязычной аудитории 🌐
📁 Собрано 99+ самых полезных и интересных сервисов, сохрани: @futurenow
🥩 Сгенерируй готовую презентацию по одной ссылке [открыть]
📇 Собери досье на любого человека по никнейму [открыть]
🕵️♂️ Открой сборник детективных загадок и разгадай их [открыть]
🎧 Получи бесконечный плейлист под любой вайб [открыть]
💻 Создай любой сайт со смартфона за 10 минут [открыть]
На канале «Будущее сегодня» публикуют все последние новости из мира технологий для русскоязычной аудитории 🌐
📁 Собрано 99+ самых полезных и интересных сервисов, сохрани: @futurenow
🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.
Сайтодел | #репозиторий #github
Сайтодел | #репозиторий #github
DocumentFragment: как делать пакетные DOM-вставки аккуратнее!
Когда элементы добавляются в DOM по одному, браузеру приходится постоянно обновлять структуру документа. На небольших объёмах это почти незаметно, но при рендере больших списков или сложных интерфейсов такие операции могут начать стоить дороже. Для таких случаев в DOM API есть
Создаём
const fragment = document.createDocumentFragment();
Это временный контейнер, который существует вне основного DOM-дерева. Пока элементы находятся внутри
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document
.querySelector('.list')
.appendChild(fragment);
Здесь элементы сначала собираются внутри
const fragment = document.createDocumentFragment();
users.forEach(user => {
const item = document.createElement('div');
item.className = 'user';
item.textContent = user.name;
fragment.append(item);
});
container.append(fragment);
Пример с переносом существующих элементов:
const fragment = document.createDocumentFragment();
document
.querySelectorAll('.item')
.forEach(el => {
fragment.appendChild(el);
});
newContainer.appendChild(fragment);
Здесь элементы не копируются,
Ещё один частый кейс — работа с
const template = document.querySelector('#card');
const fragment = document.createDocumentFragment();
data.forEach(item => {
const cardFragment = template.content
.cloneNode(true);
cardFragment
.querySelector('.title')
.textContent = item.title;
fragment.appendChild(cardFragment);
});
container.appendChild(fragment);
И ещё один момент:
const fragment = document.createDocumentFragment();
fragment.appendChild(
document.createElement('div')
);
container.appendChild(fragment);
console.log(fragment.childNodes.length); // 0
После вставки содержимое
Важно понимать, что
console.log(
fragment instanceof HTMLElement
); // false
🔥 У него нет собственного layout, стилей или визуального отображения. Но при больших объёмах DOM, сложных компонентах или частых обновлениях интерфейса
📣 Code Ready | #практика
Когда элементы добавляются в DOM по одному, браузеру приходится постоянно обновлять структуру документа. На небольших объёмах это почти незаметно, но при рендере больших списков или сложных интерфейсов такие операции могут начать стоить дороже. Для таких случаев в DOM API есть
DocumentFragment.Создаём
fragment:const fragment = document.createDocumentFragment();
Это временный контейнер, который существует вне основного DOM-дерева. Пока элементы находятся внутри
fragment — они не участвуют в рендеринге страницы. Можно спокойно собрать структуру в памяти, а потом вставить всё одной операцией. Пример — массовое добавление элементов:const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document
.querySelector('.list')
.appendChild(fragment);
Здесь элементы сначала собираются внутри
fragment, а затем одной вставкой попадают в основной DOM. Такой подход уменьшает количество промежуточных вставок в live DOM и делает массовый рендер более предсказуемым. Пример через append():const fragment = document.createDocumentFragment();
users.forEach(user => {
const item = document.createElement('div');
item.className = 'user';
item.textContent = user.name;
fragment.append(item);
});
container.append(fragment);
append() тоже работает с DocumentFragment. По смыслу разницы почти нет — append() просто современнее и удобнее. Плюс он умеет принимать строки и несколько узлов сразу.Пример с переносом существующих элементов:
const fragment = document.createDocumentFragment();
document
.querySelectorAll('.item')
.forEach(el => {
fragment.appendChild(el);
});
newContainer.appendChild(fragment);
Здесь элементы не копируются,
appendChild() физически переносит DOM-узлы в новый контейнер. Один и тот же элемент не может одновременно находиться в двух местах дерева. Ещё один частый кейс — работа с
template:const template = document.querySelector('#card');
const fragment = document.createDocumentFragment();
data.forEach(item => {
const cardFragment = template.content
.cloneNode(true);
cardFragment
.querySelector('.title')
.textContent = item.title;
fragment.appendChild(cardFragment);
});
container.appendChild(fragment);
template.content уже является DocumentFragment, поэтому cloneNode(true) возвращает готовый набор DOM-узлов, который удобно изменять перед вставкой.И ещё один момент:
const fragment = document.createDocumentFragment();
fragment.appendChild(
document.createElement('div')
);
container.appendChild(fragment);
console.log(fragment.childNodes.length); // 0
После вставки содержимое
fragment переносится в DOM, а сам fragment остаётся пустым. По сути это временный контейнер для группы узлов.Важно понимать, что
DocumentFragment — не полноценный HTML-элемент:console.log(
fragment instanceof HTMLElement
); // false
🔥 У него нет собственного layout, стилей или визуального отображения. Но при больших объёмах DOM, сложных компонентах или частых обновлениях интерфейса
DocumentFragment всё ещё остаётся удобным способом собрать структуру отдельно от основного DOM и вставить её одним действием.📣 Code Ready | #практика
🐙 HTMX – мощные инструменты для HTML, которые работают с AJAX, CSS-переходами и веб-сокетами. Доступ к этим технологиям создается с помощью специальных HTML-аттрибутов.
Сайтодел | #репозиторий #github
Сайтодел | #репозиторий #github
🎨 Цветовая палитра макета "Money Forest"
Сайтодел | #палитра
HEX | RGB #C8CDB7 | rgb(200,205,183)
#F7726C | rgb(247,114,108) #066873 | rgb(6,104,115)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
👨💻 Хочешь сделать своего Telegram-бота, но не знаешь с чего начать?
Лови шпаргалку по Aiogram на русском, в которой всё разложено от А до Я:
➡️ от первого запуска бота до админ-панели и клавиатур с кнопками.
➡️ от форматирования текста до пошаговых сценариев (FSM).
➡️ от работы в группах до встроенных инлайн-меню.
🗳 Внутри:
🖱 Как быстро инициализировать бота и настроить команды.
🖱 Фильтры, клавиатуры, кнопки, inline-меню.
🖱 FSM — пошаговые диалоги с пользователем.
🖱 CallbackQuery, редактирование сообщений и админ-функции.
🖱 Примеры кода, которые можно просто вставить в проект.
Подходит для:
🟢новичков, которые хотят сделать первого бота.
🟢фрилансеров, чтобы брать заказы и делать быстрее.
🟢разработчиков, чтобы не гуглить по сто раз.
👍 Сохраняй и делай своего крутого Telegram-бота прямо сегодня!
#python #doc #cheatsheet #soft
Лови шпаргалку по Aiogram на русском, в которой всё разложено от А до Я:
➡️ от первого запуска бота до админ-панели и клавиатур с кнопками.
➡️ от форматирования текста до пошаговых сценариев (FSM).
➡️ от работы в группах до встроенных инлайн-меню.
🗳 Внутри:
🖱 Как быстро инициализировать бота и настроить команды.
🖱 Фильтры, клавиатуры, кнопки, inline-меню.
🖱 FSM — пошаговые диалоги с пользователем.
🖱 CallbackQuery, редактирование сообщений и админ-функции.
🖱 Примеры кода, которые можно просто вставить в проект.
Подходит для:
🟢новичков, которые хотят сделать первого бота.
🟢фрилансеров, чтобы брать заказы и делать быстрее.
🟢разработчиков, чтобы не гуглить по сто раз.
👍 Сохраняй и делай своего крутого Telegram-бота прямо сегодня!
#python #doc #cheatsheet #soft
This media is not supported in your browser
VIEW IN TELEGRAM
❤️ Web Links — огромная подборка ресурсов по JavaScript и веб-разработке!
На сайте собрана большая коллекция полезных ссылок для разработчиков: учебники, документация, статьи, блоги, инструменты, библиотеки и сервисы по JavaScript, HTML, CSS, React, Node.js и другим технологиям веб-разработки. Всё удобно структурировано по категориям, что позволяет быстро находить нужные материалы для изучения или работы.
📌 Оставляю ссылочку: vallek.github.io
📣 Code Ready | #сайт
На сайте собрана большая коллекция полезных ссылок для разработчиков: учебники, документация, статьи, блоги, инструменты, библиотеки и сервисы по JavaScript, HTML, CSS, React, Node.js и другим технологиям веб-разработки. Всё удобно структурировано по категориям, что позволяет быстро находить нужные материалы для изучения или работы.
📌 Оставляю ссылочку: vallek.github.io
📣 Code Ready | #сайт