Почему идеальный алгоритм тормозит: физика памяти и кеш-френдли-код
Вы написали алгоритм, который по сложности O(n) и должен летать, но на практике он еле ползёт. Скорее всего, проблема не в количестве операций, а в том, как данные расположены в памяти. Процессор не читает их по одному байту — он захватывает блоки (кеш-линии), и если код заставляет его прыгать по разным адресам, мощнейший CPU простаивает в ожидании.
В статье объясняют, что такое кеш-френдли-подход и почему одни и те же структуры данных на разных языках работают с разной скоростью. Разбирают, как устроены уровни кеша, почему обход матрицы по строкам быстрее, чем по столбцам, и как предсказуемость ветвлений влияет на производительность. Отдельно показывают, где применимы программные кеши вроде Redis и в чём подвох.
Если хотите перестать гадать, почему код «тупит», и начать писать так, чтобы процессор был на вашей стороне, смотрите материал: https://thecode.media/keshfrendli-kod/
@prog_point (теперь ещё в VK и Max)
Вы написали алгоритм, который по сложности O(n) и должен летать, но на практике он еле ползёт. Скорее всего, проблема не в количестве операций, а в том, как данные расположены в памяти. Процессор не читает их по одному байту — он захватывает блоки (кеш-линии), и если код заставляет его прыгать по разным адресам, мощнейший CPU простаивает в ожидании.
В статье объясняют, что такое кеш-френдли-подход и почему одни и те же структуры данных на разных языках работают с разной скоростью. Разбирают, как устроены уровни кеша, почему обход матрицы по строкам быстрее, чем по столбцам, и как предсказуемость ветвлений влияет на производительность. Отдельно показывают, где применимы программные кеши вроде Redis и в чём подвох.
Если хотите перестать гадать, почему код «тупит», и начать писать так, чтобы процессор был на вашей стороне, смотрите материал: https://thecode.media/keshfrendli-kod/
@prog_point (теперь ещё в VK и Max)
❤2
Forwarded from Веб-страница
Паттерны современного Node.js
Node.js за годы сильно изменился: от эпохи колбэков и повсеместного CommonJS до современного, чистого и стандартизированного подхода. Если вы пишете на нём уже несколько лет, вы сами видели, как код стал проще, структурированнее и ближе к веб‑стандартам.
Это не только косметические изменения: это фундаментальный сдвиг в подходе к серверной разработке на JavaScript. Современный Node.js меньше полагается на внешние библиотеки, упрощает архитектуру и делает разработку понятнее и приятнее. Давайте разберёмся, в чём суть этих изменений и почему они важны для ваших приложений в 2025 году. Переходите по ссылке: https://habr.com/ru/articles/933702/
#nodejs
@tproger_web
Читайте также в VK и Max
Node.js за годы сильно изменился: от эпохи колбэков и повсеместного CommonJS до современного, чистого и стандартизированного подхода. Если вы пишете на нём уже несколько лет, вы сами видели, как код стал проще, структурированнее и ближе к веб‑стандартам.
Это не только косметические изменения: это фундаментальный сдвиг в подходе к серверной разработке на JavaScript. Современный Node.js меньше полагается на внешние библиотеки, упрощает архитектуру и делает разработку понятнее и приятнее. Давайте разберёмся, в чём суть этих изменений и почему они важны для ваших приложений в 2025 году. Переходите по ссылке: https://habr.com/ru/articles/933702/
#nodejs
@tproger_web
Читайте также в VK и Max
❤3
Создаём портфолио в формате 2D-игры на JavaScript
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
@prog_point (теперь ещё в VK и Max)
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
@prog_point (теперь ещё в VK и Max)
❤3
Симулятор ESP32 и Arduino в браузере: Wokwi для экспериментов без железа
Wokwi — онлайн-симулятор, где можно проектировать и отлаживать схемы с ESP32, Arduino, Raspberry Pi Pico, STM32 прямо в браузере. Не нужны платы, датчики и макетная плата: всё работает виртуально, включая дисплеи, моторы и сенсорные экраны.
Это удобно для быстрого прототипирования, обмена проектами ссылкой и изучения периферии без покупки железа. А через интеграцию с Tiny Tapeout собранную схему можно превратить в реальный чип.
Попробовать: https://wokwi.com/
#инструменты #diy
@prog_point (теперь ещё в VK и Max)
Wokwi — онлайн-симулятор, где можно проектировать и отлаживать схемы с ESP32, Arduino, Raspberry Pi Pico, STM32 прямо в браузере. Не нужны платы, датчики и макетная плата: всё работает виртуально, включая дисплеи, моторы и сенсорные экраны.
Это удобно для быстрого прототипирования, обмена проектами ссылкой и изучения периферии без покупки железа. А через интеграцию с Tiny Tapeout собранную схему можно превратить в реальный чип.
Попробовать: https://wokwi.com/
#инструменты #diy
@prog_point (теперь ещё в VK и Max)
🆒6
Бригада дежурит под спойлером: Флаг --dangerously-skip-permissions — это реальная (и рискованная) опция, которая пропускает запросы на подтверждение опасных действий. Благодаря ему AI беззаботно творит код и может сделать даже неожиданные действия, например, удалить важные данные.
@prog_point (теперь ещё в VK и Max)
@prog_point (теперь ещё в VK и Max)
❤4
Claude Code: 15 фишек, которые превращают терминал в супер-помощника
Создатель инструмента показал, как выжать из него максимум, и многие возможности окажутся полезными даже тем, кто только начинает знакомство с AI-кодингом.
Для новичков это шанс быстрее влиться в процессы: не запоминать все команды Git, не сидеть часами над рутиной, а делегировать повторяющиеся действия Claude.
Все 15 скрытых возможностей с примерами использования в статье: https://tproger.ru/articles/sozdatel-claude-code-pokazal-15-skrytyh-vozmozhnostej---ot-mobil
#claude
@prog_point (теперь ещё в VK и Max)
Создатель инструмента показал, как выжать из него максимум, и многие возможности окажутся полезными даже тем, кто только начинает знакомство с AI-кодингом.
Для новичков это шанс быстрее влиться в процессы: не запоминать все команды Git, не сидеть часами над рутиной, а делегировать повторяющиеся действия Claude.
Все 15 скрытых возможностей с примерами использования в статье: https://tproger.ru/articles/sozdatel-claude-code-pokazal-15-skrytyh-vozmozhnostej---ot-mobil
#claude
@prog_point (теперь ещё в VK и Max)
❤2
Forwarded from Типичный программист
Большая подборка статей, которая поможет изучить 30 основ проектирования систем
Осталось только лайк поставить и сохранить👍
#архитектура
1. APIs
2. Вебхуки
3. REST и GraphQL
4. API Gateway
5. Балансировщики нагрузки
6. Алгоритмы балансировки нагрузки
7. Прокси vs Обратный прокси
8. Масштабируемость
9. Доступность (Availability)
10. Единая точка отказа (SPOF)
11. Теорема CAP
12. Типы баз данных
13. SQL или NoSQL
14. Транзакции ACID
15. Индексирование баз данных
16. Шардирование или партиционирование БД
17. Согласованное хеширование (Consistent Hashing)
18. Захват изменения данных (Change Data Capture, CDC
19. Кэширование
20. Стратегии кэширования
21. Политики очищения кэша (Cache Eviction Policies)
22. CDN (Сети доставки контента)
23. Алгоритмы ограничения скорости запросов (Rate Limiting)
24. Очереди сообщений (Message Queues)
25. Фильтр Блума
26. Идемпотентность
27. Конкурентность и параллелизм
28. Состояние: stateful vs stateless
29. Long polling vs WebSockets
30. Пакетная обработка и потоковая обработка
Осталось только лайк поставить и сохранить
#архитектура
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12
Машина Тьюринга в Minecraft: как редстоун превращает игру в учебник computer science
Машина Тьюринга — абстрактное вычислительное устройство из ленты, головки и таблицы правил. Построить её в реальности сложно, но в Minecraft — вполне. Автор использовал редстоун как логические вентили и собрал полноценную модель.
Для новичка это наглядный пример, как фундаментальная теория превращается в работающий механизм. В статье разобраны ячейки памяти, сдвиговый регистр для перемещения головки, ячейки программы и система управления — всё это вместе выполняет заданный алгоритм (например, инкремент числа).
Если хотите увидеть, как из базовой логики рождаются вычисления, или просто любите Minecraft — смотрите схемы и видео: https://habr.com/ru/articles/1016582/
@prog_point (теперь ещё в VK и Max)
Машина Тьюринга — абстрактное вычислительное устройство из ленты, головки и таблицы правил. Построить её в реальности сложно, но в Minecraft — вполне. Автор использовал редстоун как логические вентили и собрал полноценную модель.
Для новичка это наглядный пример, как фундаментальная теория превращается в работающий механизм. В статье разобраны ячейки памяти, сдвиговый регистр для перемещения головки, ячейки программы и система управления — всё это вместе выполняет заданный алгоритм (например, инкремент числа).
Если хотите увидеть, как из базовой логики рождаются вычисления, или просто любите Minecraft — смотрите схемы и видео: https://habr.com/ru/articles/1016582/
@prog_point (теперь ещё в VK и Max)
❤5👍1
CI/CD: как перестать бояться деплоя
CI (непрерывная интеграция) автоматически собирает и тестирует код при каждом коммите. CD (непрерывная доставка) доводит проверенный код до продакшена вручную или автоматически. Всё это настраивается через файл конфигурации в репозитории, например
Исследования DORA показывают: команды с развитым CI/CD деплоятся в 208 раз чаще и восстанавливаются после сбоев в тысячи раз быстрее. А настроить всё можно за день.
Подробное руководство с примерами и пошаговым чек-листом читайте в статье: https://tproger.ru/articles/chto-takoe-ci-cd--nepreryvnaya-integraciya-i-dostavka
@prog_point (теперь ещё в VK и Max)
CI (непрерывная интеграция) автоматически собирает и тестирует код при каждом коммите. CD (непрерывная доставка) доводит проверенный код до продакшена вручную или автоматически. Всё это настраивается через файл конфигурации в репозитории, например
.github/workflows/ci.yml.Исследования DORA показывают: команды с развитым CI/CD деплоятся в 208 раз чаще и восстанавливаются после сбоев в тысячи раз быстрее. А настроить всё можно за день.
Подробное руководство с примерами и пошаговым чек-листом читайте в статье: https://tproger.ru/articles/chto-takoe-ci-cd--nepreryvnaya-integraciya-i-dostavka
@prog_point (теперь ещё в VK и Max)
✍2
🐳 Docker vs Kubernetes: чем они отличаются?
Кому-то этот пост покажется совсем легким, но давайте незабывать, что тут собрались новички. А их может запутать вся эта терминология. Но ничего, сейчас разберемся что к чему.
Docker – платформа для упаковывания приложений в контейнеры. Она позволяет «закатать» ваше приложение со всеми зависимостями в образ и запускать этот образ на любом сервере одинаково. Kubernetes – система оркестрации контейнеров. Она управляет тысячами Docker-контейнеров в кластере: автоматический деплой, масштабирование, балансировка и восстановление. Иными словами, Docker решает, как упаковать и запустить одно приложение, а Kubernetes – как запустить множество таких контейнеров надёжно и эффективно.
Плюс Docker: лёгкий старт и повторяемость окружения (работает везде одинаково).
Плюс Kubernetes: высокая отказоустойчивость и автоматизация развёртывания. Но Kubernetes добавляет сложности: вам потребуется понимание кластеров, YAML-манифестов и DevOps-процессов.
Часто используют их вместе: Docker создаёт образ, а Kubernetes управляет его развёртыванием в продакшене. На практике большинство крупных компаний используют оба инструмента совместно.
#простымисловами #devops #docker #kubernetes
Кому-то этот пост покажется совсем легким, но давайте незабывать, что тут собрались новички. А их может запутать вся эта терминология. Но ничего, сейчас разберемся что к чему.
Docker – платформа для упаковывания приложений в контейнеры. Она позволяет «закатать» ваше приложение со всеми зависимостями в образ и запускать этот образ на любом сервере одинаково. Kubernetes – система оркестрации контейнеров. Она управляет тысячами Docker-контейнеров в кластере: автоматический деплой, масштабирование, балансировка и восстановление. Иными словами, Docker решает, как упаковать и запустить одно приложение, а Kubernetes – как запустить множество таких контейнеров надёжно и эффективно.
Плюс Docker: лёгкий старт и повторяемость окружения (работает везде одинаково).
Плюс Kubernetes: высокая отказоустойчивость и автоматизация развёртывания. Но Kubernetes добавляет сложности: вам потребуется понимание кластеров, YAML-манифестов и DevOps-процессов.
Часто используют их вместе: Docker создаёт образ, а Kubernetes управляет его развёртыванием в продакшене. На практике большинство крупных компаний используют оба инструмента совместно.
#простымисловами #devops #docker #kubernetes
🆒6⚡1
Одна строчка кода, положившая телефонную сеть США на 9 часов
В 1990 году в коде коммутаторов AT&T была ошибка: программист использовал
Последствия: 70 миллионов несбывшихся звонков, убытки в 60 миллионов (сегодня это более 120 млн) и 500 отменённых авиарейсов. Ошибка просуществовала в продакшене почти год и проявилась только при аномальной нагрузке.
Для начинающего разработчика это история о том, как важны знание языка, контроль качества и тестирование под нагрузкой, а также готовность к быстрому откату. Даже один
Подробная хроника и технические детали — в материале: https://habr.com/ru/companies/beget/articles/1009300/
В 1990 году в коде коммутаторов AT&T была ошибка: программист использовал
break внутри switch, ожидая, что он прервёт только внутренний if, но в языке C break выходит из ближайшего switch целиком. Из-за этого при высокой нагрузке маршрутизаторы начинали бесконечно перезагружаться, передавая ошибку соседним узлам. За несколько часов сеть, считавшаяся сверхнадёжной, полностью рухнула.Последствия: 70 миллионов несбывшихся звонков, убытки в 60 миллионов (сегодня это более 120 млн) и 500 отменённых авиарейсов. Ошибка просуществовала в продакшене почти год и проявилась только при аномальной нагрузке.
Для начинающего разработчика это история о том, как важны знание языка, контроль качества и тестирование под нагрузкой, а также готовность к быстрому откату. Даже один
break может стать причиной грандиозного коллапса.Подробная хроника и технические детали — в материале: https://habr.com/ru/companies/beget/articles/1009300/
👍3❤2☃1
React или Vue — как выбрать первый фреймворк и не пожалеть
Оба фреймворка делают одно и то же: помогают строить интерактивные интерфейсы из компонентов. Разница — в подходе и в том, что ждёт вас на рынке.
Vue проще начать. Шаблон, скрипт и стили живут в одном файле .vue — это интуитивно. Меньше настройки, понятнее ошибки. Хороший выбор, если хотите быстро освоить компонентный подход и начать делать проекты.
React сложнее на старте из-за JSX и большего количества концепций, но вакансий с ним в 3–4 раза больше. Экосистема шире, и большинство крупных компаний работают именно с ним.
Практический совет: если учитесь и хотите как можно быстрее написать что-то работающее — начните с Vue. Если цель — найти работу в крупной компании в ближайший год — учите React. Концепции переносятся: зная один, освоите второй за 1–2 недели.
Более подробное сравнение: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat
#javascript #frontend
@prog_point (теперь ещё в VK и Max)
Оба фреймворка делают одно и то же: помогают строить интерактивные интерфейсы из компонентов. Разница — в подходе и в том, что ждёт вас на рынке.
Vue проще начать. Шаблон, скрипт и стили живут в одном файле .vue — это интуитивно. Меньше настройки, понятнее ошибки. Хороший выбор, если хотите быстро освоить компонентный подход и начать делать проекты.
React сложнее на старте из-за JSX и большего количества концепций, но вакансий с ним в 3–4 раза больше. Экосистема шире, и большинство крупных компаний работают именно с ним.
Практический совет: если учитесь и хотите как можно быстрее написать что-то работающее — начните с Vue. Если цель — найти работу в крупной компании в ближайший год — учите React. Концепции переносятся: зная один, освоите второй за 1–2 недели.
Более подробное сравнение: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat
#javascript #frontend
@prog_point (теперь ещё в VK и Max)
❤4
Kubernetes простыми словами: зачем нужен оркестратор контейнеров
Вы уже знаете Docker, но зачем ещё и Kubernetes? Когда контейнеров много, управлять ими вручную сложно: нужно следить за падениями, нагрузкой, обновлениями. Kubernetes автоматизирует это: перезапускает упавшие контейнеры, распределяет трафик и обновляет приложение без простоя.
Для новичка система кажется сложной из-за терминов (поды, сервисы, деплойменты), но на практике логика понятна. Статья объясняет основы оркестрации без лишних деталей: кластер, поды, роль Kubernetes в облачной разработке.
Читайте материал: https://tproger.ru/articles/chto-takoe-kubernetes--orkestraciya-kontejnerov-prostymi-slovami
@prog_point (теперь ещё в VK и Max)
Вы уже знаете Docker, но зачем ещё и Kubernetes? Когда контейнеров много, управлять ими вручную сложно: нужно следить за падениями, нагрузкой, обновлениями. Kubernetes автоматизирует это: перезапускает упавшие контейнеры, распределяет трафик и обновляет приложение без простоя.
Для новичка система кажется сложной из-за терминов (поды, сервисы, деплойменты), но на практике логика понятна. Статья объясняет основы оркестрации без лишних деталей: кластер, поды, роль Kubernetes в облачной разработке.
Читайте материал: https://tproger.ru/articles/chto-takoe-kubernetes--orkestraciya-kontejnerov-prostymi-slovami
@prog_point (теперь ещё в VK и Max)
❤3
Forwarded from Типичный программист
7 TUI-инструментов, которые сделают консоль удобнее
Переключение в браузер ради конвертации видео или добавления лицензии к проекту — привычка, от которой сложно избавиться. Но новые TUI-утилиты закрывают эти задачи прямо в терминале.
Среди подобранного:
— MONICA — интерактивная надстройка над ffmpeg без необходимости помнить флаги;
— lic — одна команда для создания файла LICENSE из официальной базы GitHub;
— PNANA — терминальный редактор между nano и vim с tree-sitter подсветкой синтаксиса и поддержкой мыши;
— CodeWeaver — собирает всю кодовую базу в один Markdown-файл, чтобы удобно скармливать проект ИИ-ассистенту.
Плюс ещё три утилиты: поиск торрентов в консоли, часы и таймер для терминала, генератор .gitignore. Все свежие, большинство вышли в последние месяцы.
Подборка: https://tproger.ru/articles/ot-ffmpeg-do-torrentov-dlya-terminala--7-novyh-tui-instrumentov--kotorye-sovetuem
#инструменты
@tproger
Читайте также в VK, Max и Дзен
Переключение в браузер ради конвертации видео или добавления лицензии к проекту — привычка, от которой сложно избавиться. Но новые TUI-утилиты закрывают эти задачи прямо в терминале.
Среди подобранного:
— MONICA — интерактивная надстройка над ffmpeg без необходимости помнить флаги;
— lic — одна команда для создания файла LICENSE из официальной базы GitHub;
— PNANA — терминальный редактор между nano и vim с tree-sitter подсветкой синтаксиса и поддержкой мыши;
— CodeWeaver — собирает всю кодовую базу в один Markdown-файл, чтобы удобно скармливать проект ИИ-ассистенту.
Плюс ещё три утилиты: поиск торрентов в консоли, часы и таймер для терминала, генератор .gitignore. Все свежие, большинство вышли в последние месяцы.
Подборка: https://tproger.ru/articles/ot-ffmpeg-do-torrentov-dlya-terminala--7-novyh-tui-instrumentov--kotorye-sovetuem
#инструменты
@tproger
Читайте также в VK, Max и Дзен
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Собрали всё, что нужно знать о Python — от первой строчки до middle-уровня
Python — язык №1 в мире по TIOBE 2026. Его выбирают за то, что рабочий код можно написать уже через несколько часов знакомства. Но потом часто теряешься: что учить дальше и в каком порядке?
В путеводителе по Python разобраны все ключевые темы по порядку: типы данных и duck typing, функции с замыканиями и декораторами, ООП с магическими методами, asyncio и GIL, веб-фреймворки Django / Flask / FastAPI, Data Science и тестирование с pytest. Плюс свежее: Python 3.14 получил экспериментальный JIT-компилятор — язык ускоряется, не теряя простоты.
#python
Python — язык №1 в мире по TIOBE 2026. Его выбирают за то, что рабочий код можно написать уже через несколько часов знакомства. Но потом часто теряешься: что учить дальше и в каком порядке?
В путеводителе по Python разобраны все ключевые темы по порядку: типы данных и duck typing, функции с замыканиями и декораторами, ООП с магическими методами, asyncio и GIL, веб-фреймворки Django / Flask / FastAPI, Data Science и тестирование с pytest. Плюс свежее: Python 3.14 получил экспериментальный JIT-компилятор — язык ускоряется, не теряя простоты.
#python
❤3🤔1
Интерактивный визуализатор того, как GPT генерирует текст — прямо в браузере
Карпати недавно опубликовал microgpt — полный GPT в 200 строках Python без зависимостей. Один разработчик сделал из этого обучающий сайт: открываете страницу, листаете — и видите пошагово, как нейросеть генерирует имена.Никакой установки, всё работает в браузере. Если хотите понять, что происходит внутри трансформера, но академические статьи пока кажутся тяжёлыми — хорошая точка входа.
Вам больше заходят такие интерактивные визуализаторы или лучше статьи и видео?
#ии #python
@prog_point (теперь ещё в VK и Max)
Карпати недавно опубликовал microgpt — полный GPT в 200 строках Python без зависимостей. Один разработчик сделал из этого обучающий сайт: открываете страницу, листаете — и видите пошагово, как нейросеть генерирует имена.Никакой установки, всё работает в браузере. Если хотите понять, что происходит внутри трансформера, но академические статьи пока кажутся тяжёлыми — хорошая точка входа.
Вам больше заходят такие интерактивные визуализаторы или лучше статьи и видео?
#ии #python
@prog_point (теперь ещё в VK и Max)
✍3
Как джуниору доказать, что в него нужно вкладываться
В комьюнити вот уже который год живет стандартная присказка: «Джунов больше не берут». Да и вы сами замечаете, что на ваше резюме с уникальными сопроводительными письмами тоже никто не отвечает. Получается, в ИТ путь закрыт?
На самом деле, нет. Компании продолжают нанимать новичков, платить им, тратить время на их обучение. Только делают они это осторожно, потому что боятся, что:
— вы накрутите опыт и сольетесь за полгода,
— из-за этого они потеряют время и деньги на ваш и будущий наём.
Поэтому задача джунов трансформируется: теперь нужно доказать, что вы стоите инвестиций. Как это делать, читайте в статье на сайте Тпрогер.
Один из важных и непростых инсайдов — сразу на добротную зарплату претендовать не получится. Нужно будет принять, что первый год придется работать за минимальную сумму, которая покрывает ваши базовые потребности. Зато дальше — больше. Но об этом в материале.
@prog_point (теперь ещё в VK и Max)
В комьюнити вот уже который год живет стандартная присказка: «Джунов больше не берут». Да и вы сами замечаете, что на ваше резюме с уникальными сопроводительными письмами тоже никто не отвечает. Получается, в ИТ путь закрыт?
На самом деле, нет. Компании продолжают нанимать новичков, платить им, тратить время на их обучение. Только делают они это осторожно, потому что боятся, что:
— вы накрутите опыт и сольетесь за полгода,
— из-за этого они потеряют время и деньги на ваш и будущий наём.
Поэтому задача джунов трансформируется: теперь нужно доказать, что вы стоите инвестиций. Как это делать, читайте в статье на сайте Тпрогер.
Один из важных и непростых инсайдов — сразу на добротную зарплату претендовать не получится. Нужно будет принять, что первый год придется работать за минимальную сумму, которая покрывает ваши базовые потребности. Зато дальше — больше. Но об этом в материале.
@prog_point (теперь ещё в VK и Max)
❤1
Как протестировать доступность сайта без единого инструмента — просто клавиатурой
Автоматические анализаторы вроде Lighthouse находят часть проблем с доступностью, но не могут воспроизвести реальный опыт пользователя, который не пользуется мышью. А для этого достаточно пяти клавиш:
Подробнее можно прочитать в статье.
Попробуйте прямо сейчас: уберите мышь и пройдите по любому своему проекту только клавиатурой. Далеко уйдёте?
@prog_point (теперь ещё в VK и Max)
Автоматические анализаторы вроде Lighthouse находят часть проблем с доступностью, но не могут воспроизвести реальный опыт пользователя, который не пользуется мышью. А для этого достаточно пяти клавиш:
Tab — переходит вперёд по интерактивным элементам (ссылки, кнопки, поля, чекбоксы). Три вещи, которые нужно проверить: фокус переходит к следующему элементу, вокруг него виден индикатор фокуса, порядок переходов логичный сверху вниз.Shift + Tab — движение назад. Важно убедиться, что обратный порядок тоже логичный.Enter — активирует элемент: переходит по ссылке или отправляет форму.Пробел — меняет состояние на текущем экране: ставит или снимает галочку с чекбокса. Чекбоксы и радиокнопки должны объявлять своё текущее состояние (включено / выключено) для скринридеров.Стрелки — читают страницу построчно, включая alt-текст изображений. В отличие от Tab, который перепрыгивает текст между элементами, стрелки позволяют пройти через весь контент.Подробнее можно прочитать в статье.
Попробуйте прямо сейчас: уберите мышь и пройдите по любому своему проекту только клавиатурой. Далеко уйдёте?
@prog_point (теперь ещё в VK и Max)
❤2