Цього року telegra.ph святкує десятиліття. Десять років — це чималий термін для будь-якого веб-інструменту, а для настільки мінімалістичного — і поготів. Редактор, який можна описати одним реченням: відкрив, написав, натиснув кнопку — і публікація живе у мережі. Без реєстрації, без паролів, без зайвих питань. З моменту запуску пройшло 10 років, а редактор телеграф усе ще користується попитом.

Про можливості telegra.ph написано дійсно багато. Анонімні публікації, підтримка зображень та відео, вбудовування твітів і YouTube-роликів, автоматична індексація пошуковиками, посилання з авторитетного домену — все це відомі факти, які кочують з огляду в огляд. Радимо переглянути публікацію в редакторі: корисне про Telegra.ph про лайфхаки з форматування та неочікувані трюки із застосуванням. Але нас, як завжди більше цікавило інше: а що ж там всередині? Як влаштований код сторінки? Які рішення прийняла команда Telegram при розробці, і чи є серед них щось нетривіальне або просто дивне?

Відкриваємо вихідний код. Починаємо дивитися.

Відкриваємо вихідний код telegraf

Загальна структура: менше — більше

Перше, що впадає в очі при перегляді коду сторінки telegra.ph — це його чистота. Не в сенсі відсутності помилок, а буквально: HTML-розмітка виглядає лаконічно. Команда Telegram дотрималася того ж принципу мінімалізму, що і в інтерфейсі — нічого зайвого.

Структура сторінки публікації виглядає приблизно так:

  • стандартний DOCTYPE html та метатеги з відкритим графом (og:title, og:description, og:image) для коректного відображення в соціальних мережах;
  • підключення єдиного зовнішнього CSS-файлу та одного JS-бандлу — без зайвих залежностей;
  • основний контейнер article з класами, що відповідають за типографіку;
  • блок керування публікацією внизу сторінки.

Тег <article> — це принципово правильний семантичний вибір. Не просто div, а саме article, що відповідає специфікації HTML5 і сигналізує пошуковим ботам: ось самостійна одиниця контенту. Дрібниця, але показова.

Найцікавіше: закоментовані кнопки EDIT і PUBLISH

Це, мабуть, найбільш обговорювана технічна особливість для тих, хто колись заглядав у вихідний код сторінок telegra.ph. Якщо відкрити код опублікованої сторінки, можна знайти щось на кшталт:

<!--<a class="tl_article_edit" href="#">Edit</a>-->
<!--<button id="publish">Publish</button>-->

Кнопки є в HTML — але вони закоментовані. Вони не видалені з коду, вони саме що приховані за допомогою коментарів. Навіщо? Логіка тут доволі проста, але від цього не менш елегантна: той самий шаблон сторінки використовується і для режиму перегляду, і для режиму редагування. Коли ви є автором (браузер має токен), JavaScript розкоментовує або активує ці елементи динамічно. Коли ви — сторонній читач, кнопки просто залишаються невидимими.

Про токени авторизації в telegra.ph

telegra.ph не використовує традиційні облікові записи з логіном та паролем. Натомість при першій публікації браузер отримує унікальний access_token, який зберігається в localStorage. Саме цей токен підтверджує право редагувати конкретні публікації. Якщо токен втрачено (наприклад, очищено кеш браузера або змінено пристрій) — доступ до редагування публікацій втрачається назавжди, якщо не використовувався бот @Telegraph для прив'язки до акаунту Telegram. Ось чому "анонімність" telegra.ph — це водночас і перевага, і ризик.

contenteditable замість <form> і <textarea>

Ще одна цікава архітектурна деталь. У більшості веб-редакторів для введення тексту використовується або стандартний <textarea>, або бібліотека на базі прихованого iframe. У telegra.ph обраний третій шлях — атрибут contenteditable на блочних HTML-елементах.

Це означає, що весь редактор — це, по суті, звичайний <div> зі спеціальним атрибутом, який дозволяє браузеру редагувати його вміст напряму. Жодних <form>-тегів. Жодних прихованих input-полів. При публікації JavaScript забирає вміст DOM-дерева, серіалізує його у власний формат Node (масив об'єктів) і відправляє на API.

Використання contenteditable замість класичних форм — це підхід, який дозволяє реалізувати WYSIWYG-редагування без важких бібліотек. Той самий принцип, що й у редакторі Medium, Google Docs (частково) та ряді сучасних note-taking застосунків.

Quill під капотом (чи не зовсім Quill)

У технічних обговореннях telegra.ph часто згадується бібліотека Quill.js — відомий open-source WYSIWYG-редактор. І справді, деякі CSS-класи та підходи в коді telegra.ph перегукуються з Quill. Однак команда Telegram, судячи з усього, написала власну реалізацію або суттєво адаптувала існуючі рішення, а не просто підключила готову бібліотеку "з коробки".

Це видно з кількох ознак:

  • мінімальний розмір JS-бандлу — жодна повноцінна редакторська бібліотека не може бути настільки компактною;
  • відсутність характерних для Quill класів на кшталт ql-editor або ql-toolbar в опублікованих сторінках;
  • власний формат серіалізації контенту через Telegraph API (масив Node-об'єктів, а не Delta-формат Quill).

Дозволені теги і що за ними стоїть

Telegraph API документує обмежений набір HTML-тегів, які підтримуються для контенту сторінок:

a, aside, b, blockquote, br, code, em, figcaption, figure, 
h3, h4, hr, i, iframe, img, li, ol, p, pre, s, strong, u, ul, video

Зверніть увагу: h1 і h2 у цьому списку відсутні. Натомість є тільки h3 та h4. Це свідоме рішення — заголовок самої публікації технічно є елементом h1, і відповідно до ієрархії підзаголовки мають починатися з h3. Деякі розробники сприймають це як дивацтво, але з погляду семантики HTML це виправдано: один h1 на сторінку, а далі — відповідна вкладеність.

Також примітна наявність тегів figure, figcaption та aside. Це повноцінна семантична розмітка.

Мета-теги і Open Graph: все для поширення

Аналізуючи <head> сторінок telegra.ph, одразу помічаєш ретельну роботу з мета-тегами. Кожна публікація автоматично отримує:

  • коректний og:title, og:description та og:image для красивих превью при поширенні в месенджерах і соцмережах;
  • Twitter Card теги (хоча сам Twitter/X вже мало хто називає пріоритетним);
  • канонічний URL з постійним slug-ом, що формується на основі заголовку та дати.

Slug формується цікаво: береться перше слово з заголовку (або кілька), додається числовий суфікс у форматі місяць-день. Саме тому URL виглядають як telegra.ph/nazva-02-15. Це не найкращий підхід з погляду SEO (у порівнянні з повними slug-ами), але забезпечує унікальність і відносну читабельність адреси.

JavaScript: що робить, чого не видно

Основна логіка роботи редактора зосереджена в одному мінімізованому JS-файлі. Розкрити його повністю без декомпіляції складно, але поведінка говорить сама за себе.

При завантаженні сторінки скрипт перевіряє localStorage на наявність токена. Якщо токен є і публікація належить цьому токену — активується режим редагування: з'являються приховані кнопки, контент стає contenteditable. Якщо ні — сторінка залишається у режимі лише для читання.

Панель форматування тексту (bold, italic, посилання, заголовок) з'являється не постійно, а лише при виділенні фрагмента тексту — через mouseup і selectionchange події. Це чистий UX-прийом: не захаращувати інтерфейс елементами керування до того моменту, поки вони реально потрібні.

Завантаження зображень без API-ключа

Окремо варто згадати про завантаження медіафайлів. У telegra.ph є недокументований endpoint для завантаження зображень — https://telegra.ph/upload. Він приймає файли напряму, без авторизації та API-ключів. Технічно будь-хто може завантажити зображення і отримати посилання. Команда Telegram навмисно не документує цей endpoint і, мабуть, має власні механізми запобігання зловживанням. У 2023 році завантаження медіа було взагалі вимкнено на певний час саме через зловживання.

Відсутність аналітики і реклами: принципова позиція

У коді сторінок telegra.ph немає жодного рядка сторонньої аналітики — ні Google Analytics, ні Яндекс.Метрики, ні будь-яких піксель-трекерів. Це підтверджує позицію Telegram щодо приватності: платформа не відстежує поведінку читачів і не продає рекламу.

Для розробника це також означає: сторінки telegra.ph завантажуються швидко. Без сторонніх скриптів, без запитів до зовнішніх CDN з аналітичними бібліотеками, без cookies-попереджень. Просто контент.

За даними різних досліджень продуктивності, відсутність сторонніх трекерів може прискорити завантаження сторінки на 20–40% в порівнянні з аналогічними платформами, що використовують рекламні та аналітичні скрипти.

Що говорить структура URL

URL-адреса кожної публікації telegra.ph сама по собі є джерелом інформації. Формат такий:

https://telegra.ph/[заголовок-місяць-день]

Дата у slug — це дата першої публікації. Змінити заголовок після публікації можна, але slug залишиться незмінним — це важлива деталь для тих, хто хоче використовувати telegra.ph для SEO-цілей. Гарний, описовий заголовок при першій публікації — це і є ваш постійний URL.

Також варто зазначити, що telegra.ph використовує HTTPS за замовчуванням і має правильно налаштований редирект з HTTP. Звична річ у 2025 році, але десять років тому, при запуску у 2016-му, це було не таким само очевидним рішенням для мінімалістичних проектів.

Дивні речі та питання без відповіді

При аналізі коду залишається кілька моментів, які викликають запитання. Наприклад, форма скарги на контент (Report content) реалізована як окремий HTML-блок всередині тієї ж сторінки, прихований через CSS, а не через окремий endpoint чи модальне вікно, підвантажуване динамічно. Прагматично, але трохи старомодно.

Інший нюанс: сторінка telegra.ph технічно не має канонічного мета-тегу <link rel="canonical">. Для більшості сторінок це не критично, але для SEO-пуристів — дрібна прогалина.

І ще одне спостереження. В коді відсутній будь-який manifest.json або PWA-маніфест, що могло б зробити telegra.ph застосунком, який можна "встановити" на телефон. Схоже, що команда свідомо не йде цим шляхом, залишаючи інструмент суто веб-орієнтованим.

Загалом код telegra.ph — це невеличкий майстер-клас з принципу "роби одну річ, але добре". Жодних надлишків, мінімум залежностей, семантична розмітка, правильна робота з токенами та приватністю. За десять років редактор майже не змінився зовні — і, судячи з коду, всередині теж. Це або знак того, що все зроблено правильно з першого разу, або свідчення того, що проект давно перейшов у режим підтримки. А як ви думаєте — чи потребує telegra.ph оновлень, чи його сила саме в незмінності? Напишіть у коментарях — буде цікаво порівняти враження тих, хто використовує його як читач, і тих, хто, як я, звик дивитися насамперед у вихідний код.

Рубрика «ОГЛЯДИ»
2026-03-27 • Перегляди [ 164 ]
Оцінка - 5.0 (1)
 Схожі публікації