CSS Swirl

Версияна чистом CSS.

400 квадратов, с использованием sibling-index и count, кучи тригонометрических функций и немного типизированной арифметики. (Пока работает только в Chrome 140+).

https://codepen.io/amit_sheen/full/PwZoLBG

🖨️📄 BentoPDF: Мощный инструмент для работы с PDF в браузере

BentoPDF — это клиентский PDF-редактор, который позволяет редактировать, объединять и обрабатывать PDF-файлы без загрузки на сервер. Все операции выполняются локально, обеспечивая полную конфиденциальность ваших данных.

🚀 Основные моменты:
- Полная конфиденциальность: обработка происходит в браузере.
- Без ограничений: работайте с любым количеством файлов.
- Высокая производительность: быстрое и эффективное выполнение задач.
- Бесплатно и с открытым исходным кодом.

📌 GitHub: https://github.com/alam00000/bentopdf

🪄 Открытая альтернатива Firebase — на стероидах PostgreSQL

Платформа, которая даёт всё, чтобы собрать современное веб-, мобильное или AI-приложение — без проприетарных SDK и боли.

Что внутри:
⚙️ Хостинг Postgres с realtime-синхронизацией
🧩 Автогенерация REST и GraphQL API
🔐 Аутентификация и авторизация через JWT
⚡ Edge-функции и серверные триггеры
📦 Хранилище файлов с поддержкой S3
🧠 AI-инструменты: векторные индексы, эмбеддинги, семантический поиск
🪶 Всё open source и доступно для self-host.

По сути это Firebase-опыт, но построенный на «взрослых» open-source технологиях:
PostgreSQL, Elixir, GoTrue, PostgREST, pg_graphql.

Платформа, где можно запустить идею, вырастить продукт и не упереться в чьи-то закрытые лимиты.
#Postgres #OpenSource #Backend #AI #GraphQL #Realtime #FirebaseAlternative

https://github.com/supabase/supabase

👨‍💻 Пишете на JS, но чувствуете, что инструментов уже не хватает?

На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js.

❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях.

🏃‍♂️‍➡️🏃‍♂️‍➡️🏃‍♂️‍➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокоду JSPRO_10 и закрепите за собой участие:

https://otus.pw/4dXc/?erid=2W5zFGz1P5J

Подробности уточняйте у менеджеров

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Трюк по CSS ⭐

Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.

.canvas {
  background: var(--gradient);
  mask:  var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@​keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨.
Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение.

Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

https://codepen.io/jh3y/pen/ExrWOJe

@react_tg

Gentle button 'explode'

Визуальные эффекты при наведении мыши на кнопку. Использованы SCSS и JS.

https://codepen.io/cassie-codes/pen/zYdxopE

🚀 AI-Powered Full-Stack Development Platform

FullStack Agent — это инновационная платформа, позволяющая создавать и развивать веб-приложения с помощью ИИ и естественного языка. Она использует Claude Code и Kubernetes для безопасного и масштабируемого развертывания проектов в изолированных средах.

🚀 Основные моменты:
- 🤖 Разработка с помощью ИИ: создание приложений через естественный язык
- 🔒 Изолированные среды: каждый проект работает в своем контейнере Kubernetes
- 🗄️ Автоматическое создание баз данных: PostgreSQL по запросу
- 🌐 Веб-терминал: доступ к среде через интегрированный ttyd
- 🔐 Интеграция с GitHub: управление репозиториями и версиями

📌 GitHub: https://github.com/FullstackAgent/FullstackAgent

🚀 Создание AI-агентов без кода

Open Agent Builder — это визуальный конструктор для разработки и развертывания рабочих процессов AI-агентов. Используя интерфейс перетаскивания, вы можете легко создавать сложные потоки, включая автоматизацию исследований и веб-скрапинг.

🚀 Основные моменты:
- Интуитивно понятный интерфейс для создания рабочих процессов
- Поддержка реального времени с обновлениями
- Интеграция с Firecrawl для веб-скрапинга
- Многофункциональные узлы для различных задач
- Поддержка аутентификации и управления пользователями

📌 GitHub: https://github.com/firecrawl/open-agent-builder

Упаковка проекта с анимацией в один HTML-файл — или как кодировка Windows-1251 помогла сэкономить 52 МБ 💡

Крутейшая разработка собственного упаковщика, который собирает большую анимационную сцену в один автономный HTML-файл.

Такой файл можно запустить в любом браузере, без интернета и без веб-сервера — полностью офлайн.

Эффекты мерцания с помощью CSS 🚀

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; }

Теперь обсуждаем кино не в комментариях — а с нейросетью 🔥

ГигаЧат научился разговаривать: говорит, слушает и даже уточняет детали. Всё звучит живо, будто общаешься с другом, который перечитал IMDb и пару научных статей.

Хочешь обсудить фильм? «Пятый элемент»? Легко. Можно обсудить смыслы, эмоции, режиссуру и всё, что скрыто между строк.

Будущее, о котором мечтали в 1997-м, уже здесь.

#ai #gigachat #технологии

💡 Together AI показали, как построить «Lovable Clone» с моделью 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

⚡️ Новый проект: 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копируй .env.example в .env и настрой параметры
3. Запусти: docker compose up --build
4. Открой: фронтэнд (по умолчанию https://localhost:3000) & API (https://localhost:8000)

https://github.com/rdumasia303/deepseek_ocr_app/

<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>

🌐 Интерактивная визуализация данных для SVI

SVI — это инструмент для интерактивной визуализации данных, который позволяет пользователям легко исследовать и анализировать сложные наборы данных. Он предлагает интуитивно понятный интерфейс и мощные функции для создания наглядных графиков и диаграмм.

🚀Основные моменты:
- Интерактивные графики для глубокого анализа данных
- Поддержка различных форматов данных
- Легкость в использовании и настройке
- Возможность интеграции с другими инструментами

📌 GitHub: https://github.com/samihadouaj/svi

#javascript

📹 Загрузчик медиа из Twitter 🚀

TwitterXDownload — это мощный инструмент для скачивания видео и других медиа из Twitter. Он идеально подходит для контент-креаторов и маркетологов, позволяя эффективно переводить и перепубликовывать контент. Также проект служит отличной основой для изучения Next.js и других технологий.

🚀 Основные моменты:
- 🎥 Извлечение медиа из твитов с поддержкой пакетной загрузки
- 🔍 Умный поиск по твитам по автору, дате и типу медиа
- 🌐 Однокнопочный перевод и перепубликация твитов
- 🌍 Поддержка 12 языков для глобальной доступности
- 📦 Оптимизация для SEO и AdSense

📌 GitHub: https://github.com/imtonyjaa/twitterxdownload

#javascript

Записываем музыку при помощи CSS Grid

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.

https://cruncher.ch/blog/printing-music-with-css-grid/

🚀 Ищем HTML-верстальщика (лендинги) в вертикаль «инвестиции».
Только с опытом.
Нужен тот, кто быстро и качественно создает одностраничники.
Большой объём задач — постоянная загрузка для того, кто любит темп.
Ждем от тебя адаптив, аккуратность, скорость.

💰 Предлагаем хорошие условия по оплате
🌍 Работа полностью удалённая
Если умеешь быстро и качественно верстать — напиши 👉 @sueta_v_gorode