#WebAccessibility #DevTools

> 300 миллионов человек страдают дальтонизмом

Когда-нибудь задумывались о том, как ваш сайт выглядит для людей с нарушениями зрения?

Чтобы легче следить за доступностью, не придется качать дополнительные программы.
В Chrome DevTools для этого есть много инструментов, один из них: "Emulate vision deficiencies", позволяющий проверить, как ваш контент воспринимается людьми с разной степенью цветовой слепоты.

#DevTips

🚀 Открываем localhost на телефоне

(и тестируем мобилку без деплоя)

На самом деле, все просто:

- подключаем телефон и компьютер к одной Wi-Fi сети
- открываем терминал и вводим команду ifconfig | grep "inet ". (ipconfig для windows)
- ищем строку начинающуюся с "inet " и содержащую IP-адрес формата "192.168.x.x".
- запускаем приложение используя этот хост (пример для angular cli: ng serve --host 192.168.x.x --port 4200)
- заходим в мобильный браузер и в адресной строке вводим этот IP-адрес с нужным портом (192.168.x.x:4200)

Всë!

#cookie #browser

LocalStorage, SessionStorage и IndexedDB - что мы теряем при отказе от Cookie? 🍪

Смотрели когда-нибудь, что произойдет с вашим сайтом или веб-приложением если пользователь отключит куки?
Не паникуйте сразу, ошибки бывают у всех, даже у ребят с MDN.
А получим мы следующее веселье со скриншота, еще и бесконечные загрузки или белые экраны в придачу.

Суть проста: не забываем оборачивать вызовы LocalStorage, SessionStorage и IndexedDB в try-catch блоки.

🔧 Решаем проблему с переключением языка на macOS (вместо Apple) 😱

Сталкивались с проблемой, когда нажали клавишу переключения языка, но ничего не поменялось? (Не говорите "нет", я вам все равно не поверю).

В общем, вся беда в этом назойливом попапе, который не только требует времени на открытие, но и взаимодействует со случайно оказавшимся по центру курсором.

Дальше хорошие новости.

Товарищи программисты разработали скрипт, который решает эту проблему за пару шагов. Идея в следующем: Мы избавляемся от раздражающего попапа, но при этом оставляет функцию переключения языка на "fn" клавишу.

Cсылка на гитхаб с подробной инструкцией:
https://github.com/norflin321/fn-lang-switcher

📲 Адаптация мобильной клавиатуры под поле ввода

Оптимизация мобильного пользовательского опыта становится все более важной задачей. Один из способов улучшить этот опыт - это адаптация клавиатуры под поле ввода с помощью атрибута inputmode.

Типы раскладок, которые можно указать:

- text: Стандартная текстовая клавиатура для обычного ввода текста.
- numeric: Цифровая клавиатура, подходящая для ввода кодов доступа или номеров документов.
- tel: Цифровая клавиатура с символами +, # и *, удобная для ввода телефонных номеров.
- search: Клавиша Enter заменяется на "Поиск".
- url: Клавиатура для ввода URL-адресов, дополнительно предоставляющая символы / и ., а также расширенный выбор доменов.
- email: Клавиатура для ввода электронной почты, включающая символы @ и .
- none: Не вызывает клавиатуру, полезно при использовании кастомных вариантов ввода.

Поддержка - тут (смотрим мобильные браузеры)
Демо - тут

#css #design

📐 Быстрый прыжок в курс школьной геометрии

Итак, что вам не расскажут на курсе «Профессия дизайнер за 2 недели»?
Правильно - как считать скругление углов.
И я не шучу! Казалось бы, очевидные вещи, а проблемы можно найти даже у гигантов индустрии.
(Делитесь в комментариях, если нашли.)

Так вот, чтобы правильно загруглить углы внутреннего блока, достаточно воспользоваться формулой:

inner radius = outer radius - padding

Будет работать в большинстве стандартных кейсов.
Почему в большинстве? - Потому что формула линейна и, конечно же, не покрывает всë.

Если хотите больше погрузится в эту тему, можно почитить тред в твиттере X.

Принципы SOLID и объектно-ориентированный дизайн программ

В интернете существует бесконечное число статей, видео и разного рода интерпретаций принципов SOLID, и найти среди них действительно хороший материал бывает непросто. Но я нашел, и делюсь им с вами)

Для каждого из принципов вы найдете примеры кода (на TypeScript), шаблоны проектирования, ограничения и проверочные вопросы. А еще лаконичный дизайн, и русский язык.

📖 Ссылка на книгу:
https://solidbook.vercel.app/