Интерактив
Особенность нашей энциклопедии заключается в том, что используется не только текст, но и множество интерактивных React-компонентов, которые реагируют на действия пользователя (клик, ввод текста) мгновенно, так как могут легко обновлять внутреннее состояние (state) без перезагрузки страницы, благодаря чему мы получаем живое изучение.
Такие кастомные React-демо встроены в статьи через play.spirzen.ru (iframe, lazy load). Это не сторонние виджеты и не скриншоты — эмуляторы Office и терминала, пошаговые визуализаторы алгоритмов, схемы сети и инфраструктуры, тренажёры SQL и Git, игровые мини-демо и многое другое.
Поскольку интерактив расположен на другом сервисе, элемент <iframe> создаёт независимый встроенный браузерный контекст, который загружает совершенно отдельную HTML-страницу внутри вашего основного сайта. Как встраиваемые YouTube-ролики, карты или баннеры. Но вместо рекламы, я использую именно интересные возможности.
Ниже — витрина лучших демо в порядке возрастания сложности: сначала раздел "Основы", затем система и сеть, данные, код, языки, ИИ, проект и инфраструктура. Полный каталог привязан к статьям энциклопедии; здесь — ориентиры, с которых удобно начать. Полный реестр компонентов ведётся в репозитории (info/demo-registry.md). На сайте каждое демо живёт в своей статье — откройте ссылку под блоком, чтобы углубиться.
Главное - не смущайтесь от необходимости "кликать" на демо для запуска. Такой подход выбран осознанно, для скорости и обеспечения распределённости энциклопедии.
1. Основы
Скорость печати
Замер зн/мин и слов/мин с подсветкой ошибок: шесть базовых текстов, тридцать сложных на русском и тридцать на английском (QWERTY). Удобно начать здесь, затем перейти к карте клавиатуры и зонам пальцев.
Статьи: Как научиться быстро печатать, Клавиши для новичка, Клавиатура, Горячие клавиши Windows
Play ITЗагрузка интерактивного демо…
Карта клавиатуры
Тренажёр раскладки, зон и сочетаний — полезен новичкам до углубления в ОС.
Статья: Советы для новичка
Play ITЗагрузка интерактивного демо…
Зоны пальцев (слепая печать)
Цветовая схема домашнего ряда и мини-дрилл «нажми нужную клавишу».
Статья: Как научиться быстро печатать
Play ITЗагрузка интерактивного демо…
Устройства ввода-вывода
Как данные попадают в компьютер и обратно — мышь, клавиатура, диск, сеть.
Статья: Базовые операции с данными
Play ITЗагрузка интерактивного демо…
Типы данных
Биты, числа, строки и логика представления — фундамент перед программированием.
Статья: Данные и информация
Play ITЗагрузка интерактивного демо…
Архитектура ПК
Процессор, память, накопители и периферия в одной наглядной схеме.
Статья: Архитектура персонального компьютера
Play ITЗагрузка интерактивного демо…
Компилятор и интерпретатор
Как исходный код превращается в исполняемую программу.
Статья: Программа
Play ITЗагрузка интерактивного демо…
Дорожная карта изучения
Интерактивное дерево всех разделов энциклопедии и рекомендуемый маршрут.
Статья: Дорожная карта изучения
Play ITЗагрузка интерактивного демо…
Визуальные блоки кода
Сборка простых программ из блоков — мост к текстовому коду.
Статья: Основные языки
Play ITЗагрузка интерактивного демо…
Веб-приложение: фронт и бэк
Запросы, слои и роли клиента и сервера.
Статья: Фронтенд и бэкенд
Play ITЗагрузка интерактивного демо…
IT-английский
Три режима: карточки с переворотом, викторина и ввод перевода. Прогресс сохраняется в браузере; слова берутся из учебного плана и таблицы в статье.
Статья: Ключевые термины и фразы
Play ITЗагрузка интерактивного демо…
Хаб тренажёров
SQL, терминалы, Git, Docker и практика — переключение категорий без перезагрузки страницы. Можно открыть с якорем, например #practice/english.
Страница: Лаборатория → Тренажёры
2. Система и сеть
Сетевой стек
Уровни от приложения до канала — как пакет проходит по стеку.
Статья: Сеть и интернет
Play ITЗагрузка интерактивного демо…
HTTP-запрос
Разбор заголовков, метода, тела и ответа сервера.
Статья: HTTP как основа веб-интеграций
Play ITЗагрузка интерактивного демо…
3. Данные и разметка
HTML-песочница
Живое редактирование разметки и просмотр результата.
Статья: HTML
Play ITЗагрузка интерактивного демо…
WebEditor — HTML, CSS и JavaScript
Полноценный онлайн-редактор с отдельными вкладками HTML, CSS и JavaScript: живой предпросмотр обновляется при вводе. Удобен для экспериментов со всем веб-стеком сразу — не только с разметкой, как во встроенной песочнице выше.
Отдельное приложение экосистемы: WebEditor (исходники на GitHub) — в статьях разделов HTML, CSS и JavaScript ссылка также стоит под встроенными демо.
SQL JOIN
Пошаговый тренажёр соединений таблиц.
Статья: SQL
Play ITЗагрузка интерактивного демо…
SQL Generator Online
Конструктор запросов: соберите SELECT/INSERT по правилам SQL; можно загрузить таблицу из Excel и получить INSERT для импорта в БД.
Отдельное приложение: SQL Generator Online — в статьях раздела SQL ссылка также стоит под встроенным SQL-тренажёром.
Просмотр схемы БД
Имитация подключения к СУБД и ER-диаграмма таблиц с внешними ключами — по мотивам Database Schema Viewer. Панели подключения и сведений о таблице можно свернуть, чтобы видеть схему целиком.
Статья: Основы баз данных
Play ITЗагрузка интерактивного демо…
4. Код и разработка
Визуализатор алгоритма
Пошаговое выполнение кода с подсветкой строк.
Статья: Что такое код
Play ITЗагрузка интерактивного демо…
Git
Ветки, коммиты и слияния в безопасной песочнице.
Статья: Основы Git
Play ITЗагрузка интерактивного демо…
Schema Maker — свободные схемы
Лёгкий редактор блок-схем и эскизов: фигуры, связи, рисование от руки, экспорт PNG / PDF / JSON. По мотивам отдельного проекта Schema Maker.
Статья: Проектирование и архитектура
Полная онлайн-версия (минималистичный холст, экспорт PNG в один клик): Schema Maker Online.
Play ITЗагрузка интерактивного демо…
ArchiStyler — планировщик классов
UML-диаграмма, шаблоны паттернов (MVP, Strategy, Factory, Repository, слои), роли классов и превью C# / Java. Режим "во весь экран" — кнопка ⛶ у демо.
Статьи: Основы архитектуры, Паттерны проектирования
Отдельное приложение для архитектурных схем и паттернов: ArchiStyler Online.
Play ITЗагрузка интерактивного демо…
5. Программирование
Bash-оболочка
Команды, пайпы и сценарии в интерактивном терминале.
Статья: Bash
Play ITЗагрузка интерактивного демо…
6. Искусственный интеллект
Нейросеть
Слои, веса и прохождение сигнала через сеть.
Статья: Нейросети
Play ITЗагрузка интерактивного демо…
ИИ-агент
Цикл восприятия, рассуждения и действий агента.
Статья: Модели и инструменты
Play ITЗагрузка интерактивного демо…
7. Проект
Основы тестирования
Уровни и виды проверок качества ПО.
Статья: Тестирование
Play ITЗагрузка интерактивного демо…
BPMN
Справочник нотации и построение процессов.
Статья: Аналитика
Play ITЗагрузка интерактивного демо…
8. Инфраструктура и безопасность
Диаграмма инфраструктуры
Сборка схемы сервисов, балансировки и масштабирования.
Статья: Микросервисы и интеграция
Play ITЗагрузка интерактивного демо…
Docker Compose
Сервисы, сети и зависимости в одном стеке.
Статья: Контейнеризация
Play ITЗагрузка интерактивного демо…
CI/CD: слои проверок
Конвейер сборки, тестов и выкладки.
Статья: DevOps и CI/CD
Play ITЗагрузка интерактивного демо…
Откройте любой раздел энциклопедии с карты на главной или по дорожной карте — интерактивные блоки стоят там, где они помогают понять тему, а не ради украшения.