This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS Hamburger fold-out menu
Раскладывающееся меню Гамбургер. Написано на чистом CSS.
https://codepen.io/erikterwan/pen/EVzeRP
Раскладывающееся меню Гамбургер. Написано на чистом CSS.
https://codepen.io/erikterwan/pen/EVzeRP
👍1
🚀 AI-Управляемый Поиск Работы
Career-Ops — это интеллектуальная платформа для поиска работы, использующая Claude Code. Она автоматизирует процесс оценки предложений, генерации резюме и отслеживания заявок, позволяя сосредоточиться на наиболее подходящих вакансиях.
🚀Основные моменты:
- Оценка предложений с использованием системы баллов A-F.
- Генерация адаптированных резюме в формате PDF.
- Автоматическое сканирование порталов для новых вакансий.
- Параллельная обработка нескольких предложений.
- Интегрированная система отслеживания заявок.
📌 GitHub: https://github.com/santifer/career-ops
#javascript
Career-Ops — это интеллектуальная платформа для поиска работы, использующая Claude Code. Она автоматизирует процесс оценки предложений, генерации резюме и отслеживания заявок, позволяя сосредоточиться на наиболее подходящих вакансиях.
🚀Основные моменты:
- Оценка предложений с использованием системы баллов A-F.
- Генерация адаптированных резюме в формате PDF.
- Автоматическое сканирование порталов для новых вакансий.
- Параллельная обработка нескольких предложений.
- Интегрированная система отслеживания заявок.
📌 GitHub: https://github.com/santifer/career-ops
#javascript
🚀 SEO теперь можно разбирать через ИИ, а не вслепую
Появился мощный инструмент для SEO-оптимизации, который быстро показывает, почему сайт не добирает позиции в поиске и что именно нужно исправить.
Сервисы на базе Claude и ChatGPT проводят полный аудит: проверяют AI-видимость, качество контента, SEO-метрики, структурированные данные и техническое состояние сайта. На выходе вы получаете итоговый скор и понятный план действий, а не просто набор сухих замечаний.
То есть инструмент не только находит проблемы, но и подсказывает, что делать дальше, чтобы реально подтянуть выдачу.
Отдельно есть PDF-отчёт для брендов. В нём собирается анализ упоминаний компании на популярных площадках, чтобы можно было быстро оценить цифровое присутствие и понять, где усиливать маркетинг.
Удобная штука для тех, кто хочет не гадать, почему сайт просел, а сразу получить внятную карту роста.
https://github.com/zubair-trabzada/geo-seo-claude
Появился мощный инструмент для SEO-оптимизации, который быстро показывает, почему сайт не добирает позиции в поиске и что именно нужно исправить.
Сервисы на базе Claude и ChatGPT проводят полный аудит: проверяют AI-видимость, качество контента, SEO-метрики, структурированные данные и техническое состояние сайта. На выходе вы получаете итоговый скор и понятный план действий, а не просто набор сухих замечаний.
То есть инструмент не только находит проблемы, но и подсказывает, что делать дальше, чтобы реально подтянуть выдачу.
Отдельно есть PDF-отчёт для брендов. В нём собирается анализ упоминаний компании на популярных площадках, чтобы можно было быстро оценить цифровое присутствие и понять, где усиливать маркетинг.
Удобная штука для тех, кто хочет не гадать, почему сайт просел, а сразу получить внятную карту роста.
https://github.com/zubair-trabzada/geo-seo-claude
This media is not supported in your browser
VIEW IN TELEGRAM
DOOM ЧЕРЕЗ CURL. ДА, ПРОСТО HTTP ЗАПРОС
Разработчик запустил Doom прямо в терминале без установки и GUI.
Работает через обычный curl. Под капотом сервер стримит кадры игры как ANSI-графику, а ввод с клавиатуры уходит обратно по тому же соединению.
По сути это полноценная игра поверх HTTP, без клиента, без зависимостей. Только bash и сеть.
Сюрреализм в том, что это не демка, а реально играбельная штука.
Хочешь попробовать - открываешь терминал и играешь.
https://github.com/xsawyerx/curl-doom
Разработчик запустил Doom прямо в терминале без установки и GUI.
Работает через обычный curl. Под капотом сервер стримит кадры игры как ANSI-графику, а ввод с клавиатуры уходит обратно по тому же соединению.
По сути это полноценная игра поверх HTTP, без клиента, без зависимостей. Только bash и сеть.
Сюрреализм в том, что это не демка, а реально играбельная штука.
Хочешь попробовать - открываешь терминал и играешь.
https://github.com/xsawyerx/curl-doom
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools 💡
Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?
Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?
This media is not supported in your browser
VIEW IN TELEGRAM
Header With Slide Bar
Появляющийся заголовок с ползунком. Написан на чистом CSS.
https://codepen.io/kamciu/pen/xxbJzBv
Появляющийся заголовок с ползунком. Написан на чистом CSS.
https://codepen.io/kamciu/pen/xxbJzBv
⚡️ Claude Design: новая фича, которая делает лендинги и презентации по двум строкам промпта
В Claude выкатили Claude Design - отдельный продукт для генерации сайтов, слайдов и анимированных видео. Живёт на claude.ai/design, под капотом Opus 4.7, статус research preview. Нужен Pro или Max.
Как пользоваться. Заходите, выбираете Wireframe, Presentation или Animated video. Для wireframe сразу включайте High fidelity. В промпте указываете четыре вещи: цель, аудиторию, структуру и тон. Жмёте Create.
Файл DESIGN.md с вашим бренд-стилем (шрифты, цвета, тон). Положили в проект, упомянули в промпте, и Claude применяет ваш брендинг ко всему, что генерит. Без этого результат красивый, но шаблонный.
Рабочий шаблон промпта: «Создай [лендинг/презентацию/видео] для [продукта]. Тон: [бренд A] + [бренд B]».
Главная ошибка - размытые формулировки. «Красивый лендинг» = шаблонный AI-результат. Всегда задавайте аудиторию, три референса по стилю и желаемый итог.
Полезные команды после первого результата:
покажи 3 альтернативных варианта структуры, проверь контраст по WCAG 2.1 AA, сгенерируй версии под desktop/tablet/mobile, предложи два A/B-варианта hero-блока.
Экспорт в один клик: Canva, PPTX, PDF, HTML.
Где реально экономит время: pricing-страницы, sales deck по брифу, превращение статьи в 30-секундное видео, hero-варианты для A/B-тестов, посты в Instagram под бренд-кит. Час на страницу вместо дня.
В Claude выкатили Claude Design - отдельный продукт для генерации сайтов, слайдов и анимированных видео. Живёт на claude.ai/design, под капотом Opus 4.7, статус research preview. Нужен Pro или Max.
Как пользоваться. Заходите, выбираете Wireframe, Presentation или Animated video. Для wireframe сразу включайте High fidelity. В промпте указываете четыре вещи: цель, аудиторию, структуру и тон. Жмёте Create.
Файл DESIGN.md с вашим бренд-стилем (шрифты, цвета, тон). Положили в проект, упомянули в промпте, и Claude применяет ваш брендинг ко всему, что генерит. Без этого результат красивый, но шаблонный.
Рабочий шаблон промпта: «Создай [лендинг/презентацию/видео] для [продукта]. Тон: [бренд A] + [бренд B]».
Главная ошибка - размытые формулировки. «Красивый лендинг» = шаблонный AI-результат. Всегда задавайте аудиторию, три референса по стилю и желаемый итог.
Полезные команды после первого результата:
покажи 3 альтернативных варианта структуры, проверь контраст по WCAG 2.1 AA, сгенерируй версии под desktop/tablet/mobile, предложи два A/B-варианта hero-блока.
Экспорт в один клик: Canva, PPTX, PDF, HTML.
Где реально экономит время: pricing-страницы, sales deck по брифу, превращение статьи в 30-секундное видео, hero-варианты для A/B-тестов, посты в Instagram под бренд-кит. Час на страницу вместо дня.
This media is not supported in your browser
VIEW IN TELEGRAM
Timekeeping
Небольшое приложение - таймер, созданный на Vue и анимированный библиотекой gsap.
https://codepen.io/Sicontis/pen/qBVMzLj
Небольшое приложение - таймер, созданный на Vue и анимированный библиотекой gsap.
https://codepen.io/Sicontis/pen/qBVMzLj
👍1
🖥️✨ Hermes Web UI: Интуитивный веб-дашборд для управления AI чатами. Позволяет отслеживать использование, настраивать каналы и управлять заданиями через удобный интерфейс.
🚀Основные моменты:
- Мультисессионное управление чатами с поддержкой различных платформ.
- Аналитика использования токенов и отслеживание затрат.
- Настройка и управление заданиями по расписанию.
- Интегрированный терминал для работы с несколькими сессиями.
📌 GitHub:
#javascript
https://github.com/EKKOLearnAI/hermes-web-ui
🚀Основные моменты:
- Мультисессионное управление чатами с поддержкой различных платформ.
- Аналитика использования токенов и отслеживание затрат.
- Настройка и управление заданиями по расписанию.
- Интегрированный терминал для работы с несколькими сессиями.
📌 GitHub:
#javascript
https://github.com/EKKOLearnAI/hermes-web-ui
GitHub
GitHub - EKKOLearnAI/hermes-web-ui: Web dashboard for Hermes Agent — multi-platform AI chat, session management, scheduled jobs…
Web dashboard for Hermes Agent — multi-platform AI chat, session management, scheduled jobs, usage analytics - EKKOLearnAI/hermes-web-ui
🎨 Создание диаграмм для вашего бренда
Этот репозиторий предлагает инструмент для генерации стильных диаграмм, которые соответствуют вашему бренду. Всего 13 типов диаграмм, включая архитектурные схемы и потоки, которые можно быстро настроить под ваши цвета и шрифты, просто указав URL вашего сайта.
🚀 Основные моменты:
- 13 типов диаграмм: от архитектуры до временных линий.
- Быстрая настройка под ваш бренд за 60 секунд.
- Доступны три варианта: минималистичный светлый, темный и полный редактор.
- Генерация диаграмм без необходимости в сборке или внешних изображениях.
- Легкий доступ к живой галерее для просмотра всех типов диаграмм.
📌 GitHub: https://github.com/cathrynlavery/diagram-design
#javascript
Этот репозиторий предлагает инструмент для генерации стильных диаграмм, которые соответствуют вашему бренду. Всего 13 типов диаграмм, включая архитектурные схемы и потоки, которые можно быстро настроить под ваши цвета и шрифты, просто указав URL вашего сайта.
🚀 Основные моменты:
- 13 типов диаграмм: от архитектуры до временных линий.
- Быстрая настройка под ваш бренд за 60 секунд.
- Доступны три варианта: минималистичный светлый, темный и полный редактор.
- Генерация диаграмм без необходимости в сборке или внешних изображениях.
- Легкий доступ к живой галерее для просмотра всех типов диаграмм.
📌 GitHub: https://github.com/cathrynlavery/diagram-design
#javascript
JavaScript. Каким будет результат?
Anonymous Poll
23%
false true
17%
true false
23%
false false
29%
true true
43%
Посмотреть ответы
🎮 Создание игр с OpenGame
OpenGame — это открытая платформа для создания веб-игр на основе текстовых подсказок. Она использует мощные языковые модели для генерации игр, обеспечивая стабильную архитектуру и исправление ошибок в процессе разработки.
🚀 Основные моменты:
- Полноценное создание игр от идеи до реализации.
- Использует GameCoder-27B для управления игровыми движками.
- Оценка качества игр с помощью OpenGame-Bench.
- Поддержка множества игровых жанров и стилей.
📌 GitHub: https://github.com/leigest519/OpenGame
OpenGame — это открытая платформа для создания веб-игр на основе текстовых подсказок. Она использует мощные языковые модели для генерации игр, обеспечивая стабильную архитектуру и исправление ошибок в процессе разработки.
🚀 Основные моменты:
- Полноценное создание игр от идеи до реализации.
- Использует GameCoder-27B для управления игровыми движками.
- Оценка качества игр с помощью OpenGame-Bench.
- Поддержка множества игровых жанров и стилей.
📌 GitHub: https://github.com/leigest519/OpenGame
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll Reveal
В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент.
https://codepen.io/HighFlyer/pen/qByPyqr
В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент.
https://codepen.io/HighFlyer/pen/qByPyqr
👍1👎1
🚀 Mike: Полнофункциональный фронтенд и бэкенд для обработки документов
Mike — это открытый проект, объединяющий Next.js для фронтенда и Express API для бэкенда. Он обеспечивает доступ к Supabase и включает в себя обработку документов с возможностью миграции.
🚀 Основные моменты:
- Фронтенд на Next.js для динамичного интерфейса
- Бэкенд на Express с поддержкой Supabase
- Обработка документов и миграции базы данных
- Лицензия AGPL-3.0
📌 GitHub: https://github.com/willchen96/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 и огромным количеством сайтов, которые вы открываете каждый день.
Самое сильное в этой истории не только масштаб.
А то, что один человек начал писать инфраструктурный код без сцены, без культа личности, без «я меняю мир» в каждом интервью.
Просто была инженерная проблема.
Он сел и решил её так хорошо, что спустя годы треть интернета продолжает работать на его коде.
Вот это настоящий тихий хай-тек.
Бесплатно. В свободное время. Без громкого запуска и маркетинговой машины.
Знакомьтесь: Игорь Сысоев - создатель 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 и огромным количеством сайтов, которые вы открываете каждый день.
Самое сильное в этой истории не только масштаб.
А то, что один человек начал писать инфраструктурный код без сцены, без культа личности, без «я меняю мир» в каждом интервью.
Просто была инженерная проблема.
Он сел и решил её так хорошо, что спустя годы треть интернета продолжает работать на его коде.
Вот это настоящий тихий хай-тек.
🔥4
Хватит кидать ошибки в 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 })
Так код становится понятнее, дебаг быстрее, а логи перестают превращаться в археологию.
В 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 })
Так код становится понятнее, дебаг быстрее, а логи перестают превращаться в археологию.
👍3👎1
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
Агент должен не только отвечать текстом, но и работать внутри интерфейса - читать состояние приложения, вызывать действия, обновлять 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
GitHub
GitHub - CopilotKit/CopilotKit: The Frontend Stack for Agents & Generative UI. React + Angular. Makers of the AG-UI Protocol
The Frontend Stack for Agents & Generative UI. React + Angular. Makers of the AG-UI Protocol - CopilotKit/CopilotKit
🔥1
Твой код — в сердце мощного ИИ! 💚
Команда GigaChat зовёт на One Day Offer амбициозных Java-разработчиков, которые готовы создавать AI‑продукты уровня BigTech и стать частью крупнейшего AI-комьюнити.
Если ты дружишь с Java (версии 8–25), ладишь со Spring и Hibernate, а PostgreSQL и ClickHouse для тебя — не просто слова, переходи по ссылке (https://developers.sber.ru/kak-v-sbere/one-day-offer/java_gigachat?utm_source=telegram&utm_medium=fix&utm_campaign=odo_gigachat_may_2026_post&utm_content=&utm_term=javascriptv&erid=2VtzqupTmvp) и занимай слот на One Day Offer.
Встречаемся 23 мая — очень ждём именно тебя!
Команда GigaChat зовёт на One Day Offer амбициозных Java-разработчиков, которые готовы создавать AI‑продукты уровня BigTech и стать частью крупнейшего AI-комьюнити.
Если ты дружишь с Java (версии 8–25), ладишь со Spring и Hibernate, а PostgreSQL и ClickHouse для тебя — не просто слова, переходи по ссылке (https://developers.sber.ru/kak-v-sbere/one-day-offer/java_gigachat?utm_source=telegram&utm_medium=fix&utm_campaign=odo_gigachat_may_2026_post&utm_content=&utm_term=javascriptv&erid=2VtzqupTmvp) и занимай слот на One Day Offer.
Встречаемся 23 мая — очень ждём именно тебя!