React JS

✔️ Black Forest Labs запустила MCP-сервер

Сервер доступен по адресу mcp.bfl.ai и позволяет создавать и редактировать изображения в чат-клиентах, поддерживающих этот протокол. Заявлена совместимость с Claude, Cursor, Codex, Windsurf и другими MCP-клиентами.

MCP-сервер предоставляет несколько инструментов: генерацию до 8 изображений параллельно, создание вариаций на основе предыдущего результата, просмотр истории запросов и проверку остатка средств на счёте.

Нужную модель клиент выбирает автоматически в зависимости от запроса. Доступно несколько моделей линейки FLUX.2: от быстрой Klein до топовой Мax. По умолчанию используется Flux2 Pro.

Оплата, согласно документации, производится напрямую BFL: счёт выставляется той организации, которая была выбрана при авторизации.

Актуальные тарифы - на странице bfl.ai/pricing.


@ai_machinelearning_big_data

#news #ai #ml

Button with rotating gradient border

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

🌐Ссылка на код

Ring Prepulsion

Создано на canvas и JS.

https://codepen.io/shubniggurath/pen/qeXRrW

🚀 Мощный панель управления для игровых серверов

MCSManager — это современная веб-панель для управления серверами Minecraft, Steam и другими играми. Она позволяет легко управлять несколькими серверами с одного интерфейса, предлагая надежную систему разрешений для пользователей и поддержку многоязычности.

🚀 Основные моменты:
- Быстрая установка игровых серверов с помощью встроенного магазина приложений.
- Поддержка множества игр, включая Terraria и Project Zomboid.
- Настраиваемый интерфейс с возможностью перетаскивания элементов.
- Поддержка Docker и коммерческого хостинга.
- Легковесная архитектура на TypeScript.

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

Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

Использование React Hooks для управления состоянием в веб-приложениях

При разработке веб-приложений на React, управление состоянием играет ключевую роль. Вместо классовых компонентов, вы можете использовать React Hooks, чтобы упростить управление состоянием и повысить читаемость кода. В этом посте мы разберем, как использовать React Hooks для управления состоянием в веб-приложениях и продемонстрируем пример кода.

💡 Решение: Использование React Hooks для управления состоянием в веб-приложениях

1️⃣ Введение в React Hooks: React Hooks - это новый подход в React, который позволяет использовать состояние и другие возможности React без необходимости писать классовые компоненты. С помощью хуков, таких как useState, useEffect и других, вы можете управлять состоянием компонентов и обрабатывать жизненные циклы компонентов.

2️⃣ Использование useState для управления состоянием: Хук useState позволяет вам добавлять локальное состояние в функциональные компоненты. Например, вы можете использовать useState для создания переменной счетчика и обновления ее значения.

3️⃣ Использование useEffect для работы с побочными эффектами: Хук useEffect позволяет вам выполнять побочные эффекты, такие как получение данных с сервера или подписка на события. Например, вы можете использовать useEffect для загрузки данных из API при монтировании компонента. Вот пример кода:


4️⃣ Использование других хуков и создание собственных: React предоставляет множество других хуков, таких как useContext, useRef и useMemo, которые помогут вам управлять состоянием и оптимизировать производительность компонентов. Вы также можете создавать собственные хуки для повторного использования логики в разных компонентах.

Это примеры кода и использования React Hooks для управления состоянием в веб-приложениях. Учтите, что в реальном проекте может потребоваться дополнительная обработка ошибок и оптимизация кода.

🎨 Создавайте с Open CoDesign!

Open CoDesign — это открытое решение для генерации дизайна на основе ваших запросов. Приложение работает локально, позволяя использовать модели, которые вы уже используете, без привязки к облачным сервисам. Идеально подходит для создания прототипов, презентаций и маркетинговых материалов.

🚀 Основные моменты:
- Локальная работа без облачных зависимостей
- Поддержка множества моделей (Claude, GPT и др.)
- Экспорт в форматы HTML, PDF, PPTX и другие
- Интерактивный процесс с возможностью комментирования и доработки

📌 GitHub: https://github.com/OpenCoworkAI/open-codesign

#javascript

🏄‍♂️ Приближаем лето всем фронтенд-сообществом

23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴

♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.

В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати!

🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.

🎨 Извлечение дизайна с помощью Chrome Extension

Расширение для Chrome, которое извлекает стили и информацию с веб-сайтов, создавая файлы DESIGN.md или SKILL.md. Эти файлы можно использовать с различными инструментами для разработки сайтов на основе заданной системы дизайна.

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

📌 GitHub: https://github.com/bergside/design-md-chrome

#javascript

🎨 Логотипы на заказ с AI

Генератор логотипов создает профессиональные SVG-дизайны с 6+ вариантами на основе характеристик продукта. Он предлагает высококачественные изображения для презентаций и поддерживает форматы SVG и PNG.

🚀 Основные моменты:
- Генерация логотипов с учетом принципов дизайна
- 12 стилей фона для презентаций
- Интерактивные HTML-шоукейсы с эффектами
- Поддержка редактируемых SVG и готовых PNG
- Идеально для стартапов и разработчиков

📌 GitHub: https://github.com/op7418/logo-generator-skill

#python

🖥 На Stepik обновили курс «C# с нуля до профи»

Представьте: через четыре месяца вы открываете чужой .NET-проект и читаете его как книгу.

IServiceCollection не вызывает ступора. async Task<IActionResult> пишется на автомате. Вы точно знаете, почему EF Core сгенерировал именно такой SQL - и как переписать запрос, чтобы он летал.

Это не фантазия. Это результат после 16 модулей, в которых каждая концепция объясняется через код и закрепляется практикой.

ООП, SOLID, LINQ, async/await, DI, EF Core, ASP.NET Core, Docker, Kubernetes - всё, что казалось магией, станет рабочим инструментом.

А бонусом - портфолио проектов: от CLI-утилит и REST API до собственного SaaS с multi-tenancy, JWT и деплоем в Kubernetes под TLS.

Скидка - 58% доступна 48 часов: https://stepik.org/a/282984/

Morphing Submit Button

Содержимое кнопки — svg-картинка. После нажатия на кнопку изменяются CSS-классы на элементах кнопки.

https://codepen.io/jkantner/pen/zYdaBPJ

Get Color Palette

Генерация заднего фона на основе используемых цветов, выполненная с помощью Pug, Stylus и JavaScript.

https://codepen.io/toshiya-marukubo/pen/XWVWmav

Анимированный SVG-логотип

Впервые я увидел такую анимацию штрихов в SVG в Material Line Icons Вячеслава Трушкина. Это было круто, но я никогда не задумывался о том, чтобы сделать что-то свое, пока не увидел баннер Му-Ан Чиоу на ее сайте. Я вдруг почувствовал, что тоже хочу быть крутым парнем!

https://antfu.me/posts/animated-svg-logo

slowroads

Пора за руль: это гонка с процедурной генерацией пейзажей и сменой дня/ночи прямо в браузере. Работает только на девайсах с клавиатурой.

slowroads.io

🚀 Ты всё ещё называешь обёртку над ChatGPT «AI-продуктом»?

Пока ты пишешь промпты - рынок уже ушёл дальше.

Сейчас выигрывают не те, кто умеет красиво формулировать запросы, а те, кто строит агентные системы:
- принимают решения сами
- ходят в API
- работают с Postgres и Redis
- управляют браузером через Playwright
- доводят задачи до результата без человека

И вот правда, о которой мало говорят:

90% таких систем умирают между ноутбуком и продом.

Работает локально. Ломается в реальности.
Нет архитектуры. Нет устойчивости. Нет деплоя.

AI Agents Engineering - курс со Stepik, который закрывает этот разрыв.

- LangGraph, AutoGen, Computer Use
- архитектура агентов, а не «скрипты на коленке»
- LLMOps, логирование, стабильность
- деплой в Docker и работа в проде

8 модулей, 120+ шагов, всё через практику.

На выходе не «сертификат ради галочки», а:
- рабочий production-агент
- понимание, как строить такие системы с нуля
- навыки, за которые уже платят

Сейчас самое окно входа.
Через полгода это станет базой, а не преимуществом.

Скидка 55% действует ещё 48 часов: https://stepik.org/a/276971/

Совет по CSS 💡

Легко сделать раскрывающееся меню удобным для клавиатуры с помощью CSS 🤩

#вопросы_с_собеседований
Почему результатом сравнения двух похожих объектов является false?

В JS объекты и примитивы сравниваются по-разному. Примитивы сравниваются по значению. Объекты — по ссылке или адресу в памяти, где хранится переменная. Вот почему первый console.log возвращает false, а второй — true. Переменные «a» и «c» ссылаются на один объект, а переменные «a» и «b» — на разные объекты с одинаковыми свойствами и значениями.