React JS

Подборка для тех, кто устал от «зарегистрируйтесь, чтобы скачать файл» 😈

FckSignups здесь 170+ веб-инструментов, которые работают прямо в браузере: без установки, без аккаунта и без оплаты.

Внутри конвертеры, PDF-редакторы, утилиты для изображений и видео, аналоги CapCut, инструменты для текста, файлов, разработки и даже панели для мониторинга мировых событий.

Открыл, сделал задачу, закрыл. Без почты, паролей и вечного «начните бесплатный trial».

https://github.com/BraveOPotato/FckSignups

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, заголовки и т. д.

✔️ DeepSeek OCR локально на RTX 3090

Проект даёт полноценный OCR и умную обработку документов прямо у себя на машине через DeepSeek-OCR.

Что внутри:

загрузка изображений и многостраничных PDF
точное распознавание текста + структурирование
экспорт в Markdown / HTML / DOCX / JSON
извлечение изображений и сохранение формул
удобный интерфейс (React) + API (FastAPI)
готов к запуску в Docker

Подходит, когда нужно превратить сканы в редактируемые и поисковые документы без облака.

GitHub: http://github.com/rdumasia303/deepseek_ocr_app

Zustand - это небольшая и быстрая библиотека для управления состоянием в React, которая корректно обрабатывает zombie children, concurrent rendering и потерю контекста.

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

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

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

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

https://github.com/pmndrs/zustand

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

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

xyflow предоставляет библиотеки для создания интерфейсов на основе узлов для React и Svelte, которые готовы к использованию сразу из коробки и бесконечно настраиваемы.

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

Slice vs. Splice в JavaScript

Credit Card Payment Form

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

https://codepen.io/quinlo/pen/YONMEa

🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot

Совет по javascript 💡

Более короткий способ проверки нескольких условий OR в javascript 🤩

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг

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

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

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

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

Реклама.
О рекламодателе.

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

Demo https://www.codewithshripal.com/playground/html/visually-breakup-options-in-select

JavaScript. Напишите функцию order, которая принимает строку и возвращает её вариант, очищенный от цифр, вшитых в каждое слово, и отсортированный на основе этих цифр.

Ответ

🖥 Сервисы крутятся. Прод вроде живой. Но когда тимлид спрашивает: «почему здесь лучше 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

⚡️ Linux Roadmap: подробный практический курс от нуля до уверенного администратора

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

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

https://github.com/justxor/linuxfullroadmap/

Gentle button 'explode'

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

https://codepen.io/cassie-codes/pen/zYdxopE

Совет по CSS 💡

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

Demo https://www.codewithshripal.com/playground/css/style-list-marker

🖼️✨ Упрощение создания динамических обоев

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

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

📌 GitHub: https://github.com/alfiyahkamilah1239298/WallpaperDownloader-26

Коллекция текстильных паттернов

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

https://codepen.io/thebabydino/pen/OJmpzya