🎮 Создание игр с OpenGame

OpenGame — это открытая платформа для создания веб-игр на основе текстовых подсказок. Она использует мощные языковые модели для генерации игр, обеспечивая стабильную архитектуру и исправление ошибок в процессе разработки.

🚀 Основные моменты:
- Полноценное создание игр от идеи до реализации.
- Использует GameCoder-27B для управления игровыми движками.
- Оценка качества игр с помощью OpenGame-Bench.
- Поддержка множества игровых жанров и стилей.

📌 GitHub: https://github.com/leigest519/OpenGame

Scroll Reveal

В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент.

https://codepen.io/HighFlyer/pen/qByPyqr

🚀 Mike: Полнофункциональный фронтенд и бэкенд для обработки документов

Mike — это открытый проект, объединяющий Next.js для фронтенда и Express API для бэкенда. Он обеспечивает доступ к Supabase и включает в себя обработку документов с возможностью миграции.

🚀 Основные моменты:
- Фронтенд на Next.js для динамичного интерфейса
- Бэкенд на Express с поддержкой Supabase
- Обработка документов и миграции базы данных
- Лицензия AGPL-3.0

📌 GitHub: https://github.com/willchen96/mike

Netflix, Wikipedia, Airbnb, Dropbox, WordPress - огромная часть интернета держится на веб-сервере, который когда-то в одиночку написал скромный русский инженер.

Бесплатно. В свободное время. Без громкого запуска и маркетинговой машины.

Знакомьтесь: Игорь Сысоев - создатель nginx.

В 2000 году он пришёл в Rambler системным администратором. Через пару лет начал писать собственный веб-сервер, потому что главный сервер той эпохи, Apache, плохо справлялся с большим числом одновременных подключений.

Цель звучала почти безумно для того времени: держать 10 000 соединений на одной машине.

В 2004 году nginx вышел публично. Бесплатно и как open source.

Дальше всё пошло без хайпа, но очень быстро: - к 2008 году nginx в Rambler обслуживал около 500 млн запросов в день - в 2011 году Сысоев вместе с Максимом Коноваловым основал Nginx Inc. - в 2013 году Netflix использовал nginx, чтобы разогнать свой streaming CDN до 40 Gbps на сервер - в 2019 году F5 купила Nginx Inc. за $670 млн - в 2021 году nginx обогнал Apache и стал самым популярным веб-сервером в мире

Сегодня nginx стоит за Netflix, Wikipedia, Airbnb, Dropbox, Cloudflare, WordPress и огромным количеством сайтов, которые вы открываете каждый день.

Самое сильное в этой истории не только масштаб.

А то, что один человек начал писать инфраструктурный код без сцены, без культа личности, без «я меняю мир» в каждом интервью.

Просто была инженерная проблема.

Он сел и решил её так хорошо, что спустя годы треть интернета продолжает работать на его коде.

Вот это настоящий тихий хай-тек.

Хватит кидать ошибки в JS как в 2015-м

В JavaScript давно есть нормальные инструменты для ошибок, но многие до сих пор бросают просто throw new Error("something failed").

А потом пытаются понять, где именно всё сломалось.

Что стоит использовать:

- Custom Error классы - чтобы хранить statusCode, code, details и другие поля не в строке, а в структуре
- Error.cause - чтобы оборачивать ошибку и не терять исходную причину
- AggregateError - когда параллельно упало сразу несколько операций

Главная идея простая: ошибка должна быть не просто текстом для лога, а нормальным объектом с контекстом.

Плохой вариант:

throw new Error("Could not load user")

Лучше:

throw new HttpError("Could not load user", 500, { cause: err })

Так код становится понятнее, дебаг быстрее, а логи перестают превращаться в археологию.

CopilotKit - open-source стек для тех, кто хочет встраивать AI-агентов прямо в продукт, а не просто прикручивать чат-окно сбоку.

Агент должен не только отвечать текстом, но и работать внутри интерфейса - читать состояние приложения, вызывать действия, обновлять UI и показывать пользователю нормальные React-компоненты вместо простыни текста.

Что умеет CopilotKit:

- готовый Chat UI для React с потоковой генерацией, tool calls и ответами агента;
- Generative UI - агент может рендерить и обновлять компоненты интерфейса;
- Shared State - общий слой состояния между агентом и приложением;
- Backend Tool Rendering - агент вызывает backend-инструменты, а результат отображается прямо в клиенте;
- интеграция с агентными фреймворками и моделями;
- поддержка AG-UI Protocol, который уже используют крупные игроки вроде Google, LangChain, AWS и Microsoft.

По сути, это попытка собрать frontend-слой для agentic apps: не “чат с ИИ”, а интерфейс, где пользователь и агент реально работают вместе.

GitHub: github.com/CopilotKit/CopilotKit

📝 Легкий редактор заметок с Markdown и OCR

qnote — это минималистичный десктопный редактор заметок, который поддерживает Markdown с живым предпросмотром, историю файлов и экспорт в PDF. Работает на Windows и Linux, предлагает удобный интерфейс и множество функций для эффективного редактирования.

🚀 Основные моменты:
- Поддержка Markdown и живой предпросмотр
- История версий и файлов с быстрым поиском
- Экспорт в PDF и HTML
- Встроенный OCR для извлечения текста из изображений
- Кастомизация интерфейса и тем

📌 GitHub: https://github.com/omibranch/qnote

Твой код — в сердце мощного ИИ! 💚

Команда GigaChat зовёт на One Day Offer амбициозных Java-разработчиков, которые готовы создавать AI‑продукты уровня BigTech и стать частью крупнейшего AI-комьюнити.

Если ты дружишь с Java (версии 8–25), ладишь со Spring и Hibernate, а PostgreSQL и ClickHouse для тебя — не просто слова, переходи по ссылке и занимай слот на One Day Offer.

Встречаемся 23 мая — очень ждём именно тебя!

Совет по CSS 💡

Конвертируйте цветные логотипы в однотонные черно-белые изображения для темного/светлого режимов с помощью CSS-фильтров 🤩

Нет необходимости создавать отдельные изображения для этого ✨

Demo https://www.codewithshripal.com/playground/css/uniform-grayscale-logos-using-css-filters

Интеграция YouTube API в веб-приложение с использованием JavaScript и React

Интеграция YouTube API в веб-приложение позволяет получать и отображать информацию о видео, каналах и других ресурсах YouTube. Рассмотрим, как реализовать интеграцию YouTube API в веб-приложение с использованием JavaScript и React.

1️⃣ Получение API-ключа: Начните с получения API-ключа YouTube для доступа к API. Зарегистрируйте свое приложение в Google Cloud Console и включите YouTube Data API. После этого вы получите API-ключ, который будет использоваться для аутентификации в API.

2️⃣ Настройка окружения React: Установите Node.js, создайте новый проект React и установите необходимые зависимости, включая axios для выполнения HTTP-запросов к API.

3️⃣ Инициализация и использование YouTube API: Создайте компонент YouTubeIntegration и используйте YouTube API для получения информации о видео или канале. Включите функциональность, такую как поиск видео, получение информации о конкретном видео или плейлисте, получение своего списка понравившихся видео и т.д.

4️⃣ Отображение данных YouTube: В компоненте YouTubeIntegration, используйте полученные данные от YouTube API для отображения информации о видео или канале, такую как заголовок, описание и миниатюра.

Это всего лишь базовый пример интеграции YouTube API в веб-приложение с использованием JavaScript и React. Вы можете расширить функциональность, добавить поиск видео, пагинацию и другие возможности в зависимости от ваших потребностей.