17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде.
AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.
🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse.
⏳ Начало в 17:00, встреча очных гостей - в 16:00.
Количество очных мест ограничено – успейте зарегистрироваться!
Подборка для тех, кто устал от «зарегистрируйтесь, чтобы скачать файл» 😈
FckSignups здесь 170+ веб-инструментов, которые работают прямо в браузере: без установки, без аккаунта и без оплаты.
Внутри конвертеры, PDF-редакторы, утилиты для изображений и видео, аналоги CapCut, инструменты для текста, файлов, разработки и даже панели для мониторинга мировых событий.
Открыл, сделал задачу, закрыл. Без почты, паролей и вечного «начните бесплатный trial».
https://github.com/BraveOPotato/FckSignups
✔️ DeepSeek OCR локально на RTX 3090
Проект даёт полноценный OCR и умную обработку документов прямо у себя на машине через DeepSeek-OCR.
Что внутри:
загрузка изображений и многостраничных PDF
точное распознавание текста + структурирование
экспорт в Markdown / HTML / DOCX / JSON
извлечение изображений и сохранение формул
удобный интерфейс (React) + API (FastAPI)
готов к запуску в Docker
Подходит, когда нужно превратить сканы в редактируемые и поисковые документы без облака.
GitHub: http://github.com/rdumasia303/deepseek_ocr_app
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
xyflow предоставляет библиотеки для создания интерфейсов на основе узлов для React и Svelte, которые готовы к использованию сразу из коробки и бесконечно настраиваемы.
- Пакеты @xyflow/react и @xyflow/svelte для создания редакторов узлов
- Включает встроенные компоненты MiniMap, Controls и Background
- Лицензирован по MIT с опциями коммерческой поддержки через React Flow Pro или GitHub Sponsors
-
https://github.com/xyflow/xyflow
Credit Card Payment Form
Форма оплаты кредитной картой. Реализована с помощью CSS и JavaScript.
https://codepen.io/quinlo/pen/YONMEa
Совет по javascript 💡
Более короткий способ проверки нескольких условий OR в javascript 🤩
Визуальное разделение группы связанных параметров с помощью <hr> внутри <select>
Demo https://www.codewithshripal.com/playground/html/visually-breakup-options-in-select
🖥 Сервисы крутятся. Прод вроде живой. Но когда тимлид спрашивает: «почему здесь лучше 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
Gentle button 'explode'
Визуальные эффекты при наведении мыши на кнопку. Использованы SCSS и JS.
https://codepen.io/cassie-codes/pen/zYdxopE
🖼️✨ Упрощение создания динамических обоев
Dynamic Wallpaper Project Toolkit — это мощный инструмент для организации и управления проектами динамических обоев. Он предлагает стандартизированную структуру, шаблоны и утилиты для упрощения разработки и повышения эффективности.
🚀 Основные моменты:
- Стандартизированная структура проекта для упрощения навигации.
- Шаблоны для различных типов динамических обоев.
- Утилиты для управления активами и их синхронизации.
- Скрипты для автоматизации рутинных задач.
- Подробная документация и поддержка сообщества.
📌 GitHub: https://github.com/alfiyahkamilah1239298/WallpaperDownloader-26
✔️ 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
Ring Prepulsion
Создано на canvas и JS.
https://codepen.io/shubniggurath/pen/qeXRrW
Совет по HTML 💡
Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?
Использование 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 для управления состоянием в веб-приложениях. Учтите, что в реальном проекте может потребоваться дополнительная обработка ошибок и оптимизация кода.
✔️ curl - один из самых недооценённых проектов в истории софта.
Первый релиз вышел 20 марта 1998 года. Его запустил один разработчик - Daniel Stenberg.
Прошло больше 27 лет, а он всё ещё поддерживает проект.
Сегодня curl работает на миллиардах устройств и поставляется почти везде:
* macOS
* основные Linux-дистрибутивы
* Windows 10 и новее
* серверы
* контейнеры
* embedded-системы
* CI/CD пайплайны
Ирония в том, что многие пользуются curl каждый день, даже не думая об этом.
Одна маленькая CLI-утилита стала невидимой инфраструктурой интернета.
Вот так выглядит настоящий open source: без хайпа, без миллиардных раундов, но с кодом, который держит половину мира.
5 недооцененных возможностей JavaScript
1. FlatMap
FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map().
2. Порядок использования методов массивов
Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов.
3. Метод reduce
Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод .forEach() или некорректно используют метод map().
4. Генераторы
Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка.
5. Нативные классы JavaScript
В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.
Zustand - это небольшая и быстрая библиотека для управления состоянием в React, которая корректно обрабатывает zombie children, concurrent rendering и потерю контекста.
• упрощённые принципы Flux с API на основе hooks
• не нужны providers и лишний boilerplate
• выборочно перерендеривает только при изменении состояния
• корректно решает типичные проблемы React state
https://github.com/pmndrs/zustand
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
🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot
Читать полностью…
🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг
18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
JavaScript. Напишите функцию order, которая принимает строку и возвращает её вариант, очищенный от цифр, вшитых в каждое слово, и отсортированный на основе этих цифр.
Ответ
⚡️ Linux Roadmap: подробный практический курс от нуля до уверенного администратора
Это пошаговый маршрут изучения Linux с упором на практику. Каждый раздел содержит объяснение «почему это устроено именно так», разбор команд и обязательные задания, которые нужно выполнить руками в терминале. Чтение без повторения навыка не даёт — держите терминал открытым рядом с этим текстом.
Как работать с этим курсом: идите сверху вниз, не перепрыгивайте разделы; каждую команду набирайте руками, а не копируйте; в конце каждого блока выполняйте задание; специально ломайте систему в виртуалке и чините — это лучший способ учиться.
https://github.com/justxor/linuxfullroadmap/
Совет по CSS 💡
Возможно, вы не знаете, что мы можем использовать псевдоэлемент ::marker, чтобы изменить стиль маркера/номера списка. 🤩
Demo https://www.codewithshripal.com/playground/css/style-list-marker
Коллекция текстильных паттернов
Все паттерны созданы при помощи CSS-градиентов, без каких-либо изображений. И они очень маленькие!
https://codepen.io/thebabydino/pen/OJmpzya
Button with rotating gradient border
Кнопка с вращающейся градиентной рамкой – это эффектный веб-элемент, который был разработан и анимирован с использованием языков HTML и CSS. Этот элемент привносит интересное визуальное восприятие на веб-страницу и обращает на себя внимание пользователей благодаря своей креативной анимации.
🌐Ссылка на код
🚀 Мощный панель управления для игровых серверов
MCSManager — это современная веб-панель для управления серверами Minecraft, Steam и другими играми. Она позволяет легко управлять несколькими серверами с одного интерфейса, предлагая надежную систему разрешений для пользователей и поддержку многоязычности.
🚀 Основные моменты:
- Быстрая установка игровых серверов с помощью встроенного магазина приложений.
- Поддержка множества игр, включая Terraria и Project Zomboid.
- Настраиваемый интерфейс с возможностью перетаскивания элементов.
- Поддержка Docker и коммерческого хостинга.
- Легковесная архитектура на TypeScript.
📌 GitHub: https://github.com/MCSManager/MCSManager
Cовет💡
Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.
🎨 Создавайте с Open CoDesign!
Open CoDesign — это открытое решение для генерации дизайна на основе ваших запросов. Приложение работает локально, позволяя использовать модели, которые вы уже используете, без привязки к облачным сервисам. Идеально подходит для создания прототипов, презентаций и маркетинговых материалов.
🚀 Основные моменты:
- Локальная работа без облачных зависимостей
- Поддержка множества моделей (Claude, GPT и др.)
- Экспорт в форматы HTML, PDF, PPTX и другие
- Интерактивный процесс с возможностью комментирования и доработки
📌 GitHub: https://github.com/OpenCoworkAI/open-codesign
#javascript