React JS
16.7K subscribers
665 photos
99 videos
5 files
774 links
React программирование

@haarrp - admin

@itchannels_telegram - 🔥лучшие ит-каналы

@javascriptv - продвинутый javascript

@programming_books_it - бесплатные it книги

@ai_machinelearning_big_data - ml

№ 5037566384
Download Telegram
Media is too big
VIEW IN TELEGRAM
Ring Prepulsion

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

https://codepen.io/shubniggurath/pen/qeXRrW
👍42
This media is not supported in your browser
VIEW IN TELEGRAM
Button with rotating gradient border

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

🌐Ссылка на код
👍152🔥1
Forwarded from Machinelearning
This media is not supported in your browser
VIEW IN TELEGRAM
✔️ 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
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍2🔥1🍌1
Коллекция текстильных паттернов

Все паттерны созданы при помощи CSS-градиентов, без каких-либо изображений. И они очень маленькие!

https://codepen.io/thebabydino/pen/OJmpzya
👍75🔥4
🖼️ Упрощение создания динамических обоев

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

🚀 Основные моменты:
- Стандартизированная структура проекта для упрощения навигации.
- Шаблоны для различных типов динамических обоев.
- Утилиты для управления активами и их синхронизации.
- Скрипты для автоматизации рутинных задач.
- Подробная документация и поддержка сообщества.

📌 GitHub: https://github.com/alfiyahkamilah1239298/WallpaperDownloader-26
👍41
Совет по CSS 💡

Возможно, вы не знаете, что мы можем использовать псевдоэлемент ::marker, чтобы изменить стиль маркера/номера списка. 🤩

Demo https://www.codewithshripal.com/playground/css/style-list-marker
👍16🔥7😐1
This media is not supported in your browser
VIEW IN TELEGRAM
Gentle button 'explode'

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

https://codepen.io/cassie-codes/pen/zYdxopE
👍95🔥1
⚡️ Linux Roadmap: подробный практический курс от нуля до уверенного администратора

Это пошаговый маршрут изучения Linux с упором на практику. Каждый раздел содержит объяснение «почему это устроено именно так», разбор команд и обязательные задания, которые нужно выполнить руками в терминале. Чтение без повторения навыка не даёт — держите терминал открытым рядом с этим текстом.

Как работать с этим курсом: идите сверху вниз, не перепрыгивайте разделы; каждую команду набирайте руками, а не копируйте; в конце каждого блока выполняйте задание; специально ломайте систему в виртуалке и чините — это лучший способ учиться.

https://github.com/justxor/linuxfullroadmap/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥52👍2
🖥 Сервисы крутятся. Прод вроде живой. Но когда тимлид спрашивает: «почему здесь лучше ValueTask, а не Task?» или «как GC поведёт себя под нагрузкой?» - ты начинаешь плыть.

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

Этот курс про то, что обычно остаётся под капотом:

- CLR
- JIT
- GC
- Span
- async state machine
- Source Generators
- lock-free подходы
- OpenTelemetry
- дампы в проде

На практике разбираем, как .NET реально работает внутри: что происходит с кодом после компиляции, как память живёт под нагрузкой, почему async иногда помогает, а иногда ломает производительность, как читать проблемы по дампам и метрикам, а не гадать по логам.

Если хочешь дойти до уровня, где система для тебя не чёрный ящик, а инструмент, который ты понимаешь до IL, - велкам.

Сейчас на stepik доступна скидка 55%: https://stepik.org/a/288694
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣32👍2🔥1
JavaScript. Напишите функцию order, которая принимает строку и возвращает её вариант, очищенный от цифр, вшитых в каждое слово, и отсортированный на основе этих цифр.

Ответ
7👍4
Визуальное разделение группы связанных параметров с помощью <hr> внутри <select>

Demo https://www.codewithshripal.com/playground/html/visually-breakup-options-in-select
👍13🔥64
🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг

18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир →
@shortcut_front_bot

Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍1🖕1
Совет по javascript 💡

Более короткий способ проверки нескольких условий OR в javascript 🤩
14👍10🔥1
🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Credit Card Payment Form

Форма оплаты кредитной картой. Реализована с помощью CSS и JavaScript.

https://codepen.io/quinlo/pen/YONMEa
🔥6👍3🕊2
Slice vs. Splice в JavaScript
👍173🔥1
xyflow предоставляет библиотеки для создания интерфейсов на основе узлов для React и Svelte, которые готовы к использованию сразу из коробки и бесконечно настраиваемы.

- Пакеты @xyflow/react и @xyflow/svelte для создания редакторов узлов
- Включает встроенные компоненты MiniMap, Controls и Background
- Лицензирован по MIT с опциями коммерческой поддержки через React Flow Pro или GitHub Sponsors
-
https://github.com/xyflow/xyflow
8❤‍🔥3🔥1
Open-source мониторинг без SaaS-привязки

CheckCle выглядит как интересная self-hosted альтернатива для мониторинга инфраструктуры, сервисов и приложений.

Проект даёт uptime-мониторинг, проверки HTTP, DNS, Ping и TCP-сервисов, распределённые региональные проверки, историю инцидентов, SSL и domain monitoring, public status pages, отчёты и алерты в Telegram, Slack, Discord, Matrix и email.

Главный плюс в том, что всё можно поднять у себя через Docker. Не нужен внешний SaaS, не нужно отдавать данные третьей стороне, не нужно платить за каждый монитор или сидеть в чужой панели.

По стеку тоже интересно: основа на Go, фронт на TypeScript, лицензия MIT. На GitHub у проекта уже около 2.7k звёзд, так что это не просто заброшенная утилита на вечер.

Подойдёт тем, кто хочет свой мини-UptimeRobot/Better Stack для VPS, pet-проектов, внутренних сервисов или небольшой команды.

Репозиторий: https://github.com/operacle/checkcle
3👍1
Anthropic вместе с Frontend Masters выкатили бесплатный курс по Claude Code.

И это не поверхностный обзор, а нормальный разбор инструмента для тех, кто хочет реально прокачать вайбкодинг и работу с AI-агентами.

Курс ведёт Lydia Hallie из Anthropic.

Внутри:

• основы Claude Code
• skills
• hooks
• sub-agents
• MCP
• плагины
• Agent SDK
• продвинутые сценарии работы

Хороший вход для тех, кто хочет не просто “просить ИИ написать код”, а собирать нормальный рабочий процесс вокруг Claude Code.

Ссылка:
http://frontendmasters.com/courses/claude-code
👍82🔥1
Zustand - это небольшая и быстрая библиотека для управления состоянием в React, которая корректно обрабатывает zombie children, concurrent rendering и потерю контекста.

• упрощённые принципы Flux с API на основе hooks

• не нужны providers и лишний boilerplate

• выборочно перерендеривает только при изменении состояния

• корректно решает типичные проблемы React state

https://github.com/pmndrs/zustand
🔥102👍2