Казалось бы, простая задача - сверстать список пар ключ-значение. Бери <div> и делай. Но что, если захотелось подушнить? Этим и займёмся в статье...
Рассмотрим три подхода к решению этой задачи: <div>, <dl>, <dt>, и <dd>, и <table>. Обсудим преимущества, недостатки и примеры.
Цель - помочь выбрать наиболее подходящий подход для конкретной задачи.
Я впервые столкнулся с разработкой для незрячих пользователей в 2008 году, когда принимал участие в разработке программного телефона для контакт-центров, в котором большое число агентов было незрячими.
Когда один из моих коллег потерял зрение, у меня было 10 лет опыта с технологической точки зрения. По возвращении коллеги на работу моей задачей была подготовка для него отчетов о качестве звука в зависимости от используемых каналов связи, моделей телефонных аппаратов, версий программного обеспечения, вариантов используемых кодеков и массы прочих факторов.
Такую информацию логично было сводить в таблицы. Коллега слушал бы их, получая нужную информацию.
Но, как быстро выяснилось, информация в чистом виде очень плохо воспринимается на слух. Её нужно специально подготавливать, чтобы было кратко и информативно. И даже незначительные изменения в форматировании текста приводят к тому, что он полностью меняется при озвучании скрин-ридерами.
В результате итеративного анализа того, что плохо звучит, я идентифицировал причины, по которым что-то может так звучать, и выработал набор правил, как нужно оформлять тексты, чтобы их было удобно воспринимать на слух.
Набором этих правил я и хочу поделиться.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
outline-offset;prefers-color-scheme;Давайте начнём!
На днях было появилась нужда - создать сайт новостного типа, и недолго думая приступил к поиску того самого чудо движка (CMS, пардон - за терминологию из 90х) который бы осилил задачу с относительной лёгкостью, но и - как понимаете - был бы достаточно поддерживаем (важно!), стабилен и гибок для других возможных задач (заказов) из будущего.
К авангардной тройке (WP, Joomla, Drupal) не приглянулся по N-ным причинам, но, щас не об этом.
В общем, перебрал всевозможные критерии (внушительный список хотелок :)) - гугл + ИИ в помощь смекалке и, перематывая к результату - остановился на чудо инструменте Processwire (далее PW).
Описываем способы максимально ускорить загрузку шрифтов на сайте.
Развенчиваем мифы и разбираем ошибки. В статье вас ждут полезные онлайн сервисы для ускорения работы.
В данной статье содержатся тесты фреймворка Cample.js бета-версии 3.2.0-beta.6. Это нулевой отчёт о тестах. По мере изменения результатов фреймворка, возможно, могут выйти ещё несколько отчётов.
Отчёт включает в себя сравнения по скорости с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript.
Всем привет! Недавно я решал задачу разработки сайта-лендинга для собственного проекта. У лендинга должна была быть админка, то есть данные для его содержимого должны были храниться и редактироваться на сервере. Поэтому я искал современный и мощный инструмент для генерации страниц на основе данных из API админ-панели.
Так я познакомился c подходом SSG (Static Site Generation — Генерация статических сайтов), попробовал его в деле, и хочу рассказать о том, что это такое, зачем может понадобиться SSG-фреймворк и почему Astro — лучший выбор для генерации статических сайтов прямо сейчас.
Каждый Frontend-разработчик знает, что такое объект Window. С самими объектом, вроде бы, все понятно. Но при детальном рассмотрении оказывается, что браузер никогда не отдает этот важнейший глобальный объект напрямую. В этой статье я предлагаю разобраться в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.
В этой статье я расскажу о том, как создать игру "Крестики-Нолики" простыми способами, без необходимости писать код. Для этого я буду использовать нейросеть ChatGPT3.
Привет, Хабр! Меня зовут Александр Григоренко, я фронтенд-разработчик. В основном, занимаюсь разработкой приложений на React, но также постоянно экспериментирую с различными технологиями.
В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().
Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.
Давайте познакомимся с возможностями <dialog> поближе.
Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS.
Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS
Что такое Atomic CSS?
Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека:
> Атомарный CSS — это подход к архитектуре CSS, при котором предпочтение отдается небольшим, одноцелевым классам с именами, основанными на визуальной функции.
В данной статье я расскажу про AMP-emails из личного опыта разработки , покажу примеры какие бывают емайлы, как их можно отправлять, в каких областях емайл-маркетинга они могут использоваться. У меня более 4 лет опыта работы с AMP-emails и мне есть чем с вами поделиться
Появления языка HTML, обычно датируют концом 80-х - началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие "гипертекст" и "гипермедиа"? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.
В данной статье будет рассмотрено возможное решение для разгрузки интерфейсов веб приложений – создание приложения с возможностью выноса части функционала в дополнительные окна, или же просто многооконное приложение.
Основа стека React + Redux.
Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.
В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
Все мы знакомы с широко используемыми HTML тегами, такими как <div>, <p>, <a>, и <img>. Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :)