This media is not supported in your browser
VIEW IN TELEGRAM
Gentle button 'explode'
Визуальные эффекты при наведении мыши на кнопку. Использованы SCSS и JS.
https://codepen.io/cassie-codes/pen/zYdxopE
Визуальные эффекты при наведении мыши на кнопку. Использованы SCSS и JS.
https://codepen.io/cassie-codes/pen/zYdxopE
👍5🥱5🤔1
🚀 AI-Powered Full-Stack Development Platform
FullStack Agent — это инновационная платформа, позволяющая создавать и развивать веб-приложения с помощью ИИ и естественного языка. Она использует Claude Code и Kubernetes для безопасного и масштабируемого развертывания проектов в изолированных средах.
🚀 Основные моменты:
- 🤖 Разработка с помощью ИИ: создание приложений через естественный язык
- 🔒 Изолированные среды: каждый проект работает в своем контейнере Kubernetes
- 🗄️ Автоматическое создание баз данных: PostgreSQL по запросу
- 🌐 Веб-терминал: доступ к среде через интегрированный ttyd
- 🔐 Интеграция с GitHub: управление репозиториями и версиями
📌 GitHub: https://github.com/FullstackAgent/FullstackAgent
FullStack Agent — это инновационная платформа, позволяющая создавать и развивать веб-приложения с помощью ИИ и естественного языка. Она использует Claude Code и Kubernetes для безопасного и масштабируемого развертывания проектов в изолированных средах.
🚀 Основные моменты:
- 🤖 Разработка с помощью ИИ: создание приложений через естественный язык
- 🔒 Изолированные среды: каждый проект работает в своем контейнере Kubernetes
- 🗄️ Автоматическое создание баз данных: PostgreSQL по запросу
- 🌐 Веб-терминал: доступ к среде через интегрированный ttyd
- 🔐 Интеграция с GitHub: управление репозиториями и версиями
📌 GitHub: https://github.com/FullstackAgent/FullstackAgent
🍌5❤3
🚀 Создание AI-агентов без кода
Open Agent Builder — это визуальный конструктор для разработки и развертывания рабочих процессов AI-агентов. Используя интерфейс перетаскивания, вы можете легко создавать сложные потоки, включая автоматизацию исследований и веб-скрапинг.
🚀 Основные моменты:
- Интуитивно понятный интерфейс для создания рабочих процессов
- Поддержка реального времени с обновлениями
- Интеграция с Firecrawl для веб-скрапинга
- Многофункциональные узлы для различных задач
- Поддержка аутентификации и управления пользователями
📌 GitHub: https://github.com/firecrawl/open-agent-builder
Open Agent Builder — это визуальный конструктор для разработки и развертывания рабочих процессов AI-агентов. Используя интерфейс перетаскивания, вы можете легко создавать сложные потоки, включая автоматизацию исследований и веб-скрапинг.
🚀 Основные моменты:
- Интуитивно понятный интерфейс для создания рабочих процессов
- Поддержка реального времени с обновлениями
- Интеграция с Firecrawl для веб-скрапинга
- Многофункциональные узлы для различных задач
- Поддержка аутентификации и управления пользователями
📌 GitHub: https://github.com/firecrawl/open-agent-builder
❤3🔥2👍1
Упаковка проекта с анимацией в один HTML-файл — или как кодировка Windows-1251 помогла сэкономить 52 МБ 💡
Крутейшая разработка собственного упаковщика, который собирает большую анимационную сцену в один автономный HTML-файл.
Такой файл можно запустить в любом браузере, без интернета и без веб-сервера — полностью офлайн.
Крутейшая разработка собственного упаковщика, который собирает большую анимационную сцену в один автономный HTML-файл.
Такой файл можно запустить в любом браузере, без интернета и без веб-сервера — полностью офлайн.
😁5❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Эффекты мерцания с помощью CSS 🚀
1. Animate opacity
2. Use custom linear() timing 🔥
1. Animate opacity
2. Use custom linear() timing 🔥
:root { --flicker: linear(0 0% 0.5%, 0.1723 0.7925% ... ); }
.flicker {
animation: dim 4s infinite var(--flicker) alternate;
}
@keyframes dim { opacity: 0.25; }🔥15👍5❤🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Теперь обсуждаем кино не в комментариях — а с нейросетью 🔥
ГигаЧат научился разговаривать: говорит, слушает и даже уточняет детали. Всё звучит живо, будто общаешься с другом, который перечитал IMDb и пару научных статей.
Хочешь обсудить фильм? «Пятый элемент»? Легко. Можно обсудить смыслы, эмоции, режиссуру и всё, что скрыто между строк.
Будущее, о котором мечтали в 1997-м, уже здесь.
#ai #gigachat #технологии
ГигаЧат научился разговаривать: говорит, слушает и даже уточняет детали. Всё звучит живо, будто общаешься с другом, который перечитал IMDb и пару научных статей.
Хочешь обсудить фильм? «Пятый элемент»? Легко. Можно обсудить смыслы, эмоции, режиссуру и всё, что скрыто между строк.
Будущее, о котором мечтали в 1997-м, уже здесь.
#ai #gigachat #технологии
👍2
💡 Together AI показали, как построить «Lovable Clone» с моделью Kimi K2
Гайд объясняет, как создать приложение на Next.js, которое по текстовому запросу генерирует готовое React-приложение — буквально «код по одной фразе».
🧩 В галке описаны основные шаги:
- Создать простое UI с полем ввода запроса (*“Build me a calculator app…”*).
- Реализовать API-роут
- Использовать system prompt, чтобы модель возвращала только код, без комментариев.
- Встроить Sandpack или аналог для выполнения кода прямо в браузере.
- Добавить стриминг, чтобы пользователь видел, как код появляется в реальном времени.
https://docs.together.ai/docs/how-to-build-a-lovable-clone-with-kimi-k2
Гайд объясняет, как создать приложение на Next.js, которое по текстовому запросу генерирует готовое React-приложение — буквально «код по одной фразе».
🧩 В галке описаны основные шаги:
- Создать простое UI с полем ввода запроса (*“Build me a calculator app…”*).
- Реализовать API-роут
/api/generateCode, который отправляет запрос к модели Kimi K2 через SDK Together AI. - Использовать system prompt, чтобы модель возвращала только код, без комментариев.
- Встроить Sandpack или аналог для выполнения кода прямо в браузере.
- Добавить стриминг, чтобы пользователь видел, как код появляется в реальном времени.
https://docs.together.ai/docs/how-to-build-a-lovable-clone-with-kimi-k2
❤11🔥1
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Вы можете использовать CSS-анимацию с прокруткой, например, IntersectionObserver от JavaScript 🤙
img {
animation: reveal;
animation-timeline: view();
animation-range: entry 0% entry 150%;
}
@keyframes reveal { 0% {
opacity: 0;
filter: brightness(2);
scale: 0.9;
}}
👍19
⚡️ Новый проект: DeepSeek OCR — React + FastAPI
Открыли репозиторий с современным веб-приложением OCR: фронтэнд на React, бэкенд на FastAPI.
Что умеет:
- Plain OCR — извлечение текста из изображения
- Describe — генерация описания изображения
- Find — поиск заданного термина с отображением рамки
- Freeform — задаёшь кастомный prompt и получаешь результат
Почему круто:
- Drag-and-drop загрузка изображений до 100 МБ, визуализация bounding boxes
- Конфигурация через .env (порт, размер файла, модель)
- Стек: React 18 + Vite + TailwindCSS + FramerMotion + FastAPI + PyTorch + Transformers
- Всё контейнеризовано через Docker + Docker Compose → можно быстро запустить
Как начать:
1. Клонируй репозиторий
2. Cкопируй
3. Запусти:
4. Открой: фронтэнд (по умолчанию https://localhost:3000) & API (https://localhost:8000)
https://github.com/rdumasia303/deepseek_ocr_app/
Открыли репозиторий с современным веб-приложением OCR: фронтэнд на React, бэкенд на FastAPI.
Что умеет:
- Plain OCR — извлечение текста из изображения
- Describe — генерация описания изображения
- Find — поиск заданного термина с отображением рамки
- Freeform — задаёшь кастомный prompt и получаешь результат
Почему круто:
- Drag-and-drop загрузка изображений до 100 МБ, визуализация bounding boxes
- Конфигурация через .env (порт, размер файла, модель)
- Стек: React 18 + Vite + TailwindCSS + FramerMotion + FastAPI + PyTorch + Transformers
- Всё контейнеризовано через Docker + Docker Compose → можно быстро запустить
Как начать:
1. Клонируй репозиторий
2. Cкопируй
.env.example в .env и настрой параметры 3. Запусти:
docker compose up --build 4. Открой: фронтэнд (по умолчанию https://localhost:3000) & API (https://localhost:8000)
https://github.com/rdumasia303/deepseek_ocr_app/
❤10
<h1> Ищем новичков во фронтенд-разработке и вёрстке сайтов. </h1>
<p> Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. </p>
<p> А именно: </p>
<ul>
<li> - Сверстать веб-сайт на HTML + CSS; </li>
<li> - Реализовать функционал на JavaScript; </li>
<li> - Пощупать фронтенд-фреймворк Angular;</li>
<li> - Подключить Backend и загрузить сайт на хостинг. </li>
</ul>
<p> 💪 Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. </p>
<button type="button"> 👉 Приходи на бесплатное обучение и зови с собой друзей </button>
<p> Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. </p>
<p> Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. </p>
<p> А именно: </p>
<ul>
<li> - Сверстать веб-сайт на HTML + CSS; </li>
<li> - Реализовать функционал на JavaScript; </li>
<li> - Пощупать фронтенд-фреймворк Angular;</li>
<li> - Подключить Backend и загрузить сайт на хостинг. </li>
</ul>
<p> 💪 Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. </p>
<button type="button"> 👉 Приходи на бесплатное обучение и зови с собой друзей </button>
<p> Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. </p>
😁14🍌2❤1
🌐 Интерактивная визуализация данных для SVI
SVI — это инструмент для интерактивной визуализации данных, который позволяет пользователям легко исследовать и анализировать сложные наборы данных. Он предлагает интуитивно понятный интерфейс и мощные функции для создания наглядных графиков и диаграмм.
🚀Основные моменты:
- Интерактивные графики для глубокого анализа данных
- Поддержка различных форматов данных
- Легкость в использовании и настройке
- Возможность интеграции с другими инструментами
📌 GitHub: https://github.com/samihadouaj/svi
#javascript
SVI — это инструмент для интерактивной визуализации данных, который позволяет пользователям легко исследовать и анализировать сложные наборы данных. Он предлагает интуитивно понятный интерфейс и мощные функции для создания наглядных графиков и диаграмм.
🚀Основные моменты:
- Интерактивные графики для глубокого анализа данных
- Поддержка различных форматов данных
- Легкость в использовании и настройке
- Возможность интеграции с другими инструментами
📌 GitHub: https://github.com/samihadouaj/svi
#javascript
😐6❤3🔥3
📹 Загрузчик медиа из Twitter 🚀
TwitterXDownload — это мощный инструмент для скачивания видео и других медиа из Twitter. Он идеально подходит для контент-креаторов и маркетологов, позволяя эффективно переводить и перепубликовывать контент. Также проект служит отличной основой для изучения Next.js и других технологий.
🚀 Основные моменты:
- 🎥 Извлечение медиа из твитов с поддержкой пакетной загрузки
- 🔍 Умный поиск по твитам по автору, дате и типу медиа
- 🌐 Однокнопочный перевод и перепубликация твитов
- 🌍 Поддержка 12 языков для глобальной доступности
- 📦 Оптимизация для SEO и AdSense
📌 GitHub: https://github.com/imtonyjaa/twitterxdownload
#javascript
TwitterXDownload — это мощный инструмент для скачивания видео и других медиа из Twitter. Он идеально подходит для контент-креаторов и маркетологов, позволяя эффективно переводить и перепубликовывать контент. Также проект служит отличной основой для изучения Next.js и других технологий.
🚀 Основные моменты:
- 🎥 Извлечение медиа из твитов с поддержкой пакетной загрузки
- 🔍 Умный поиск по твитам по автору, дате и типу медиа
- 🌐 Однокнопочный перевод и перепубликация твитов
- 🌍 Поддержка 12 языков для глобальной доступности
- 📦 Оптимизация для SEO и AdSense
📌 GitHub: https://github.com/imtonyjaa/twitterxdownload
#javascript
GitHub
GitHub - imtonyjaa/twitterxdownload: a powerful twitter video downloader and twitter marketing online tool. repost any tweet auto…
a powerful twitter video downloader and twitter marketing online tool. repost any tweet auto translation. - imtonyjaa/twitterxdownload
❤1
Записываем музыку при помощи CSS Grid
Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
https://cruncher.ch/blog/printing-music-with-css-grid/
Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
https://cruncher.ch/blog/printing-music-with-css-grid/
👍7🔥5❤1🥰1
🚀 Ищем HTML-верстальщика (лендинги) в вертикаль «инвестиции».
Только с опытом.
Нужен тот, кто быстро и качественно создает одностраничники.
Большой объём задач — постоянная загрузка для того, кто любит темп.
Ждем от тебя адаптив, аккуратность, скорость.
💰 Предлагаем хорошие условия по оплате
🌍 Работа полностью удалённая
Если умеешь быстро и качественно верстать — напиши 👉 @sueta_v_gorode
Только с опытом.
Нужен тот, кто быстро и качественно создает одностраничники.
Большой объём задач — постоянная загрузка для того, кто любит темп.
Ждем от тебя адаптив, аккуратность, скорость.
💰 Предлагаем хорошие условия по оплате
🌍 Работа полностью удалённая
Если умеешь быстро и качественно верстать — напиши 👉 @sueta_v_gorode
🤣20🌚2👍1
🛠️ Улучшаем коммиты с AI
Git Rewrite Commits — это инструмент для автоматического улучшения сообщений коммитов с помощью AI. Он помогает привести в порядок историю коммитов, создавая более осмысленные и структурированные сообщения, что особенно полезно перед публикацией проектов или для повышения удобства работы с репозиториями.
🚀Основные моменты:
- AI-генерация сообщений для коммитов
- Поддержка локальных моделей и оффлайн-работы
- Установка git hooks одним командой
- Оценка качества коммитов и автоматическое исправление
- Возможность настройки формата и языка сообщений
📌 GitHub: https://github.com/f/git-rewrite-commits
#javascript
Git Rewrite Commits — это инструмент для автоматического улучшения сообщений коммитов с помощью AI. Он помогает привести в порядок историю коммитов, создавая более осмысленные и структурированные сообщения, что особенно полезно перед публикацией проектов или для повышения удобства работы с репозиториями.
🚀Основные моменты:
- AI-генерация сообщений для коммитов
- Поддержка локальных моделей и оффлайн-работы
- Установка git hooks одним командой
- Оценка качества коммитов и автоматическое исправление
- Возможность настройки формата и языка сообщений
📌 GitHub: https://github.com/f/git-rewrite-commits
#javascript
😁5❤3👍2🥰1
🧩 Davia: Интерактивная документация для вашего кода
Davia — это инструмент с открытым исходным кодом, который генерирует интерактивную внутреннюю документацию для вашего локального кода. Просто укажите путь к проекту, и он создаст документацию с визуализациями, которые можно редактировать в стиле Notion или в вашем IDE.
🚀 Основные моменты:
- Генерация документации для локальных проектов
- Интерактивные визуализации и редактирование
- Открытый исходный код
- Поддержка нескольких AI-провайдеров
📌 GitHub: https://github.com/davialabs/davia
Davia — это инструмент с открытым исходным кодом, который генерирует интерактивную внутреннюю документацию для вашего локального кода. Просто укажите путь к проекту, и он создаст документацию с визуализациями, которые можно редактировать в стиле Notion или в вашем IDE.
🚀 Основные моменты:
- Генерация документации для локальных проектов
- Интерактивные визуализации и редактирование
- Открытый исходный код
- Поддержка нескольких AI-провайдеров
📌 GitHub: https://github.com/davialabs/davia
❤6👍4
🔥 Подборка полезных ресурсов для программистов.
Здесь ты найдёшь всё это - коротко, по делу и без воды.
Пока другие ищут, где “подглядеть решение”, ты уже используешь самые свежие инструменты!
AI: t.iss.one/ai_machinelearning_big_data
Python: t.iss.one/pythonl
Linux: t.iss.one/linuxacademiya
Devops: t.iss.one/DevOPSitsec
Собеседования DS: t.iss.one/machinelearning_interview
C++ t.iss.one/cpluspluc
Docker: t.iss.one/DevopsDocker
Хакинг: t.iss.one/linuxkalii
Data Science: t.iss.one/data_analysis_ml
Javascript: t.iss.one/javascriptv
C#: t.iss.one/csharp_1001_notes
Java: t.iss.one/java_library
Базы данных: t.iss.one/sqlhub
Python собеседования: t.iss.one/python_job_interview
Мобильная разработка: t.iss.one/mobdevelop
Golang: t.iss.one/Golang_google
React: t.iss.one/react_tg
Rust: t.iss.one/rust_code
ИИ: t.iss.one/vistehno
PHP: t.iss.one/phpshka
Android: t.iss.one/android_its
Frontend: t.iss.one/front
Big Data: t.iss.one/bigdatai
МАТЕМАТИКА: t.iss.one/data_math
Kubernets: t.iss.one/kubernetc
Разработка игр: https://t.iss.one/gamedev
Haskell: t.iss.one/haskell_tg
Физика: t.iss.one/fizmat
💼 Папка с вакансиями: t.iss.one/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.iss.one/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.iss.one/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.iss.one/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: https://t.iss.one/addlist/mzMMG3RPZhY2M2Iy
Папка Linux:https://t.iss.one/addlist/w4Doot-XBG4xNzYy
😆ИТ-Мемы: t.iss.one/memes_prog
🇬🇧Английский: t.iss.one/english_forprogrammers
🧠ИИ: t.iss.one/vistehno
🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
📕Ит-книги бесплатно: https://t.iss.one/addlist/BkskQciUW_FhNjEy
Сохрани себе, чтобы не потерять!
Здесь ты найдёшь всё это - коротко, по делу и без воды.
Пока другие ищут, где “подглядеть решение”, ты уже используешь самые свежие инструменты!
AI: t.iss.one/ai_machinelearning_big_data
Python: t.iss.one/pythonl
Linux: t.iss.one/linuxacademiya
Devops: t.iss.one/DevOPSitsec
Собеседования DS: t.iss.one/machinelearning_interview
C++ t.iss.one/cpluspluc
Docker: t.iss.one/DevopsDocker
Хакинг: t.iss.one/linuxkalii
Data Science: t.iss.one/data_analysis_ml
Javascript: t.iss.one/javascriptv
C#: t.iss.one/csharp_1001_notes
Java: t.iss.one/java_library
Базы данных: t.iss.one/sqlhub
Python собеседования: t.iss.one/python_job_interview
Мобильная разработка: t.iss.one/mobdevelop
Golang: t.iss.one/Golang_google
React: t.iss.one/react_tg
Rust: t.iss.one/rust_code
ИИ: t.iss.one/vistehno
PHP: t.iss.one/phpshka
Android: t.iss.one/android_its
Frontend: t.iss.one/front
Big Data: t.iss.one/bigdatai
МАТЕМАТИКА: t.iss.one/data_math
Kubernets: t.iss.one/kubernetc
Разработка игр: https://t.iss.one/gamedev
Haskell: t.iss.one/haskell_tg
Физика: t.iss.one/fizmat
💼 Папка с вакансиями: t.iss.one/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.iss.one/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.iss.one/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.iss.one/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: https://t.iss.one/addlist/mzMMG3RPZhY2M2Iy
Папка Linux:https://t.iss.one/addlist/w4Doot-XBG4xNzYy
😆ИТ-Мемы: t.iss.one/memes_prog
🇬🇧Английский: t.iss.one/english_forprogrammers
🧠ИИ: t.iss.one/vistehno
🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
📕Ит-книги бесплатно: https://t.iss.one/addlist/BkskQciUW_FhNjEy
Сохрани себе, чтобы не потерять!
❤4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Отличный гайд по тому, как прокачать навык работы с дейтпикерами в JavaScript.
В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS.
Читать здесь 👍
В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS.
Читать здесь 👍
🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
View Transitions — это подарок 🎁
Один набор CSS keyframes и одна локальная пользовательская переменная для
Один набор CSS keyframes и одна локальная пользовательская переменная для
::view-transition-old/new(body) 🚀🔥12🌚3👍2