Кнопка поруч із підписом

Що змінилося

Під смугою на головній стоять заголовок «Форма колекції» і речення, яке пояснює малюнок. Досі кнопка на вісь ішла під ними окремим рядком на будь-якій ширині. На десктопі це лишало праворуч від речення порожню половину рядка, а кнопку відсувало донизу. Тепер від 1024 px вона стоїть праворуч, і її нижній край збігається з кінцем речення. Нижче 1024 px усе як було: кнопка під реченням, зліва, з тим самим відступом.

Чому 1024, а не 768

Кнопка українською ширша за англійську, а шрифт раннера CI ширший за локальний. Речення тримає до 62 знаків у рядку. Ширина вмісту при 900 px — близько 860 px, і речення, проміжок і кнопка поруч займають майже всю. Ставити межу там означало б перевіряти її на кожній зміні тексту. При 1024 px запас є з обох боків.

Чому розмітка, а не лише стилі

Кнопка лежала поза figure, а підпис був у figcaption, останній дитині фігури. Одним CSS поставити їх в один рядок не вийшло б. Було два шляхи. Перший: перенести кнопку всередину figcaption. Тоді посилання ставало частиною назви малюнка, і скрінрідер читав би «Відкрити часову вісь» як опис смуги. Другий, обраний: заголовок, речення й кнопка стоять разом у блоці після фігури, а фігура називає їх через aria-labelledby і aria-describedby. Назва малюнка лишилася тією самою, а посилання в неї не потрапляє.

Що перевірено

npm run verify:code пройшов. Браузерні тести головної пройшли в Chromium локально: старий на 393 px, де порядок блоків не змінився, і новий. Новий тест відкриває обидві мови на 1280 і 800 px і порівнює половини рядка й краї речення, а не пікселі. На 1280 кнопка має бути в правій половині й навпроти речення, на 800 — під ним і в лівій половині. Повний прогін браузерних тестів робить CI після пушу. Задачу поставив «6 в 1» у черзі разом із трьома іншими правками головної й осі.

І підпис у підвалі

Того самого дня YouTube-канал «6 в 1» дістав нову назву. Підпис біля © у підвалі головної тепер «ITmentor» обома мовами, замість «Навчаємося разом» і «Learning together». Посилання веде на той самий канал, що й раніше. Картинка для соцмереж старої назви не мала, тож її не перемальовували. Старі записи цього журналу згадують колишню назву і такими лишаються: вони розповідають, як було тоді.

Нещодавно додані

Того ж дня внизу головної чотири приклади записів поступилися рядку «Нещодавно додані». У ньому десять останніх доданих записів, найновіший перший, у тих самих картках, що й у списку. Рядок гортається вбік і зупиняється на кожній картці, тож десять карток займають висоту однієї. Скрипта для цього не треба: головна й далі обходиться без нього.

Дати додавання в даних немає. updatedAt змінюється з кожною правкою, а дата перевірки каже, коли запис перевірили, а не коли він з’явився. Зате номер запису видається наступним вільним, коли пакет потрапляє в дані, тож десять найбільших номерів і є десятьма останніми. Дату першого коміту не взято, бо збірка на хостингу може не мати всієї історії.

Великої цифри року біля карток немає: у десяти найновіших записах вона була б однакова. Зникла й примітка про першоджерело. Вона обіцяла його лише для вибраних чотирьох, а не для всієї колекції (issue #10).

Що перевірено тут

npm run verify:code пройшов, браузерні тести головної пройшли в Chromium. Новий тест бере десять номерів із даних і дивиться, куди ведуть картки, а не як звуться записи. На 320, 393 і 1280 px рядок гортається, а сторінка вбік не гортається, і всі картки рівні заввишки. Перевірка доступності рядка чиста. На всій сторінці вона знайшла давню ваду смуги: посилання на десятиліття лежать усередині елемента з роллю зображення. Це справа смуги, її прев’ю на черзі далі.

Стрілки замість смуги прокрутки

Перша версія рядка мала під картками звичайну смугу прокрутки. «6 в 1» подивився й відповів одним словом: розчарування. Тепер смуги немає, а рядок гортають дві круглі стрілки в кінці заголовка. Кожна зсуває рядок на те, що видно, і зупиняється на краю картки. На початку й у кінці відповідна стрілка блідне. Це кнопки прокрутки, які браузер малює сам за стилями (::scroll-button), тож скрипта головна так і не має. Назви кнопок для скрінрідера беруться зі словників.

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