Мне нужны такие краты

🎮 Создание игр с 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. Вы можете расширить функциональность, добавить поиск видео, пагинацию и другие возможности в зависимости от ваших потребностей.

Infinite Cover Flow

Бесконечная галерея музыкальных постеров, которую можно прокручивать перетаскиванием, а также прокруткой колеса мыши. Реализована с помощью GSAP, ScrollTrigger и Draggable.

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

JavaScript. Что будет выведено в консоль?

Ответ

🚀 Упрощение разработки с GSD Redux

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

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

📌 GitHub: https://github.com/open-gsd/get-shit-done-redux

#javascript

Совет по Javascript 💡

Знаете ли вы об этом новом и более простом способе выбора последнего элемента массива? 🤩

⚡️ Создать JavaScript за 10 дней, запустить Mozilla, а потом собрать Brave вокруг идеи приватного браузера - у Брендана Айка биография из тех, где один человек несколько раз менял интернет.

Самое сильное в этой истории - не только JavaScript. Да, язык собрали в бешеном темпе внутри Netscape, и теперь он держит огромную часть веба. Но дальше Айк не ушёл в режим «я уже всё доказал». Он продолжил воевать за то, каким должен быть браузер.

Mozilla и Firefox были ответом на эпоху закрытого и монополизированного веба. Brave стал ответом на другую проблему: интернет, где пользователь постепенно превратился в объект слежки, таргетинга и бесконечной рекламной оптимизации.

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

Можно спорить с отдельными решениями Brave, с крипточастью, с рекламной моделью, с самим Айком. Но вклад сложно обесценить.

Он создал язык, без которого современный веб почти невозможно представить. Помог запустить один из главных открытых браузерных проектов. Потом снова пошёл против доминирующей модели интернета, где сбор данных стал нормой.

Брендан Айк - редкий пример инженера, который не просто написал важный код, а десятилетиями спорит с тем, во что превратился веб.