💡 Презентация за 22 строки: как JavaScript превратил HTML в PowerPoint XXI века

Пока индустрия обрастает фреймворками и мегабайтами зависимостей, кто-то снова напоминает, что веб-браузер сам по себе — уже полноценная платформа. На сайте nbd.neocities.org появился проект, который демонстрирует это на практике: всего 22 строки JavaScript превращают обычную HTML-страницу в интерактивную презентацию со слайдами и заметками для докладчика.

⚙️ Как это работает

Код использует нативные возможности браузера — никаких React, Reveal.js или Markdown-рендеров. Всё строится на старых добрых <div>:

• 🎞️ каждый слайд — это <div class="slide">,
• 🗒️ а заметки докладчика — <div class="slidenote"> сразу после него.

Ключевая функция — scrollIntoView().
Она просто прокручивает страницу к нужному элементу, делая каждый слайд полноэкранным (CSS height: 100vh; width: 100vw;).

Навигация элементарна:

• j — следующий слайд,
• k — предыдущий,
• n — переключение между режимами «слайды» и «заметки».

А синхронизация между окнами реализована через BroadcastChannel API — встроенный канал обмена сообщениями между вкладками. Одна вкладка показывает слайды, вторая — заметки, и они автоматически двигаются синхронно.

🧩 Минимализм с инженерным изяществом

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

🪶 Массив пар [slide, note]
Каждая пара объединяет слайд и его заметку, что позволяет одной строкой переключаться между ними:

jump = () => slides[current][viewSlides].scrollIntoView();

🔄 Побитовое XOR для переключения вида
Никаких if:

viewSlides ^= (key == "n");

Операция XOR (исключающее ИЛИ) мгновенно инвертирует 0/1, превращая переключение в элегантную однострочную магию.

📡 BroadcastChannel для синхронизации

const bc = new BroadcastChannel("slide_switching");
bc.postMessage({ current, viewSlides });

Это чистый, лёгкий способ передавать состояние между окнами без WebSocket’ов, localStorage и прочих ухищрений.

💾 Размер — 371 байт после минификации.
Это меньше favicon’а и во много раз меньше «Hello world» на React.

🧠 Почему это важно

Этот проект — не просто трюк с JavaScript, а демонстрация философии "батарейки уже включены".
Браузеры уже умеют всё необходимое для большинства интерфейсов, просто мы перестали этим пользоваться.

📚 scrollIntoView() поддерживается с IE8, а BroadcastChannel — уже почти десять лет в Chrome и Firefox.
И если объединить их с правильной идеей — можно получить продукт уровня Keynote, не выходя из браузера.

Мне это напомнило 90-е, когда весь софт умещался в одну HTML-страницу.
Тогда создавали демки на 4 килобайта, теперь — презентации на 371 байт.
И в этом — чистая инженерная красота: сделать максимум при минимуме.

🧭 Где это можно применить

🔹 Технические лекции — вы пишете конспект лекции в Markdown, вставляете нужные <div> и сразу получаете презентацию.
🔹 Документация — тот же HTML можно просматривать как страницу или как доклад.
🔹 Локальные конференции — открываете index.html в двух окнах: на ноутбуке и проекторе, одно показывает заметки, другое — слайды.
🔹 Serverless-презентации — всё хранится в одном файле, не требует ни сервера, ни JS-библиотек.

А если добавить пару строчек CSS и WebSocket для совместного редактирования — получится полноценная live-платформа вроде Google Slides, но с открытым исходником и минимальным размером.

💬 Моё мнение

Этот код — напоминание о том, что инновация не всегда в масштабах, иногда — в чистоте идеи.
Мы привыкли, что интерфейсы должны быть сложными, но сила веба именно в том, что сложное можно выразить просто.
22 строки превращают браузер в инструмент презентации, 1 API делает синхронизацию, и ни одной лишней зависимости.

В эпоху мегапакетов и билдов на 500 МБ это выглядит как манифест:

✨ «Не нужно писать больше кода — нужно писать лучше.»

🔗 Источники:

• HTML Slides with notes — nbd.neocities.org
• minslides — Dave Gaur

🖥️ Иногда, чтобы почувствовать мощь веба, достаточно 22 строк кода и одной клавиши «n».