Practice 1.4.0: велике оновлення україномовного вебредактора

Україномовний веб редактор Practice отримав чергове суттєве оновлення. Поточний цикл розвитку пройшов шлях:  1.3.0 → 1.3.1 → 1.4.0

Версія 1.4.0 стала вже не просто набором виправлень, а повноцінним функціональним розширенням редактора. При цьому головний принцип Practice залишився незмінним: жодного сервера, backend або складного встановлення — достатньо скопіювати папку та відкрити index.html.

Від стабілізації до нових можливостей

Версія 1.3.0 була стабільною основою: CodeMirror-редактор, live preview, інструменти HTML/CSS/JavaScript, теми, шаблони, медіа, суфлер і повністю локальна робота через file:///. 

У 1.3.1 основний акцент був зроблений на надійності. Було централізовано роботу з файлами, прибрано зайві та дубльовані підключення JavaScript, покращено accessibility dropdown-елементів, усунено подвійні tooltip-и. Лічильник часу редактора переведено на performance.now(), тобто на монотонний таймер, який не залежить від зміни системного годинника. Саме таку властивість performance.now() описує і вебстандарт High Resolution Time. Суфлер також став зручнішим: замість застарілого рішення з ActiveX з'явилося нормальне регулювання швидкості. 

Але найбільші зміни прийшли з Practice 1.4.0.

Open, Save і New тепер працюють як повноцінні файлові команди

Practice отримав завершений набір: Open → Save → New . У браузерах, де це можливо, редактор використовує сучасні файлові API. Для інших випадків передбачено fallback через FileReader, Blob і стандартне завантаження файла. FileReader дозволяє вебзастосункам читати файли, які користувач явно вибрав, а Blob є стандартним способом роботи з файловими даними у браузері.

Тепер можна, як і раніше, відкривати локальні файли, повторно відкривати той самий файл, зберігати результат, створювати новий документ, коректно скасовувати файлові діалоги, але гарантовано без пошкодження поточного стану.

Для навчального редактора, який повинен працювати локально, це одна з найважливіших змін версії 1.4.0.

Значно більше HTML для навчання

Розширено бібліотеку HTML-команд і прикладів. До редактора додано, зокрема:

div, span, pre, blockquote, abbr, kbd, template, noscript, form, label, input, textarea, select, fieldset, datalist, picture, source, iframe, dialog, progress, meter.

Тобто Practice тепер краще підходить не лише для перших знайомств з HTML, а й для поступового переходу до сучасної структури документів, форм, медіа та інтерактивних елементів.

Нова бібліотека практичних прикладів

До HTML, CSS і JavaScript додано шість нових навчальних прикладів без дублювання попередніх.

HTML

• форма зворотного зв'язку;
• семантична <article>-картка.

CSS

• Flexbox;
• адаптивний CSS Grid.

JavaScript

• лічильник;
• показ і приховування тексту.

JavaScript-приклади додатково перероблено після тестування: кнопки «Лічильник» і «Показати/приховати» тепер надійніше працюють без залежності від виконання окремого <script> через document.write. Це важливо не тільки для desktop, а й для мобільних браузерів.

Медіа стали надійнішими

Переглянуто приклади для:

• <picture>;
• <source>;
• <iframe>;
• audio;
• video;
• track.

Локальні шляхи приведено до структури самої папки Practice. Це дозволяє зберігати один із головних принципів проєкту: навчальні приклади повинні працювати без окремого вебсервера.

Practice став зручнішим на телефоні

Окремий блок роботи був присвячений мобільному інтерфейсу. Кнопки прикладів HTML/CSS/JavaScript тепер розміщуються по три в ряд на вузькому екрані. Під час контрольної перевірки на viewport 390 × 844 px було також виявлено горизонтальний overflow.

Після виправлення переглянуто геометрію основних контейнерів, CodeMirror, preview, суфлера. Тобто мобільна версія тепер є не просто зменшеною desktop-сторінкою, а окремо перевіреним сценарієм використання.

Telegram замість Facebook

У верхній панелі Practice стару кнопку Facebook замінено посиланням на Telegram-канал: Practice — https://t.me/practicewebua

Кнопка отримала локальний значок Telegram і приведена до загального дизайну редактора: border, закруглення, padding, shadow і hover тепер узгоджені з іншими елементами інтерфейсу.

Оновлено інформацію про редактор

Інформаційний блок Practice також очищено від застарілих даних. Тепер він показує актуальну версію:1.4.0. Прибрано старі посилання на конкретні версії браузерів і застарілу інформацію, а період розробки актуалізовано до: 2020–2026

Accessibility теж не залишилася поза увагою

Dropdown-компоненти отримали коректні:

• aria-controls;
• aria-expanded;
• aria-hidden;
• type="button";
• accessible names.

Це робить інтерфейс зрозумілішим не лише візуально, а й для допоміжних технологій. Окремо усунено ситуації, коли власний tooltip дублювався стандартним браузерним title.

Значно сильніша автоматична перевірка

Ще одна велика зміна 1.4.0 майже непомітна користувачеві, але дуже важлива для розвитку Practice.

Регресійні перевірки зараз охоплюють запуск через file:///, CodeMirror, live preview, Undo/Redo, теми, options, шаблони, Open/Save/New, суфлер, навчальні приклади, media, dropdown-и. Контрольна база включає: 155 dropdown actions, 17 dropdown triggers, 7 media-прикладів, 25 browser test groups, а також перевірки команд wripe_* із виділенням тексту і без нього.

Додано й окремий обов'язковий мобільний контроль на 390 × 844 px.

Навіть складний шлях до папки має працювати

Practice поширюється не як серверний застосунок і не як npm-проєкт. Робочим продуктом є сама папка редактора. Тому hardening-перевірка запускається також на копії всієї папки, розташованій за шляхом із пробілами, Unicode-символами, складнішою структурою каталогів. І все це — напряму через: file:/// без localhost і без окремого backend.

Practice залишається простим

Мабуть, найважливіше в оновленні 1.4.0 — те, чого ми не зробили. Practice не перетворився на framework-проєкт. Не з'явилися backend, npm як обов'язкова умова, build pipeline, локальний сервер, складна процедура встановлення.

Модель використання залишається максимально простою: скопіювали папку → відкрили index.html → працюємо.

Саме це робить Practice зручним для уроків, самостійного навчання, локальних комп'ютерів і ситуацій, коли доступ до сервера або Інтернету взагалі не потрібен.

Що отримав Practice 1.4.0

Якщо звести оновлення до одного короткого списку: Open / Save / New → більше HTML → нові HTML/CSS/JS приклади → надійніші media → покращений суфлер → accessibility → Telegram → мобільний інтерфейс → усунення overflow → сильніша file:/// portability → великий regression та hardening контроль.

Practice став функціональнішим і надійнішим, але залишився тим самим простим україномовним середовищем для практичного вивчення вебтехнологій. Поточна версія — Practice 1.4.0.

Україномовний онлайн-редактор коду Practice тепер має власний Telegram канал для обговорення, приєднатися можна за запрошувальним посиланням.