HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 2

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.

В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.
Давайте начнём!

https://habr.com/ru/companies/ruvds/articles/766344/

👉 @frontend_1

Создание поля ввода с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/input-04

👉 @frontend_1

Создание эффекта наведенной галереи с помощью flex grow 🚀

https://github.com/atherosai/ui/tree/main/gallery-06

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы о свойстве shape-outside в CSS?

Demo https://www.codewithshripal.com/playground/css/shape-outside

👉 @frontend_1

Создание карточек с эффектом наведения зума с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/cards-07

👉 @frontend_1

Совет по HTML 💡

Знаете ли вы, что мы можем легко создать сворачивающуюся панель без использования Javascript?

Demo https://www.codewithshripal.com/playground/html/details-element

👉 @frontend_1

ВКонтакте представила образовательный проект для разработчиков, IT-предпринимателей и бизнесменов, который познакомит с открытыми веб-технологиями на примере сервисов VK Mini Apps.

Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.

👉 @frontend_1

Глубокий JS. В память о типах и данных

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в документации MDN, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS. В качестве испытуемого возьмем один из самых распространенных, на сегодняшний день, движок V8 от компании Google.

Но, прежде чем мы приступим к разбору, давайте вспомним основные теоретические моменты.

https://habr.com/ru/articles/774548/

👉 @frontend_1