Вспомогательные технологии

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

Вспомогательные технологии (assistive technology) — это программы, которые упрощают взаимодействие пользователя с контентом. К примеру, выносные кнопки, трекболы, брайлевские дисплеи, экранные лупы и скринридеры

Скринридер (screen reader) — программа, которая превращает контент в речь. Они нужны людям с плохим зрением, а также пользователям с когнитивными особенностями, которым легче воспринимать информацию на слух

Ещё одна вспомогательная технология — экранная лупа (screen magnification). Частенько слабовидящие пользователи используют её вместе со скринридерами. Она увеличивает контент на экране и тоже его озвучивает, если это нужно

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

#доступность #теория

Как работают скринридеры

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

В этом посте хочу разобрать принцип работы этих программ

Скринридеры не берут контент из вкладки браузера. Существует Accessibility API — это посредник, который берет информацию из браузера и передает её скринридерам, не не просто передает, а делает это в виде дерева доступности

Ещё accessibiliry api получает от браузеров сообщения о событиях на странице, обрабатывает их и помогает скринридерам реагировать на них (выбор чекбокса или радиокнопки, открытие / закрытие модального окна, информация об ошибке и прочее). Небольшая загвоздка заключается в том, что браузеры могут работать с разными accessibiliry api, которые в свою очередь могут отличаться в передаче и обработке информации, поэтому скринридеры на разных операционных системах и в разных браузерах могут работать по-разному, это необходимо учитывать при разработке и тестирование

Пару слов о дереве доступности. Оно очень похоже на DOM, но состоит из доступных объектов и не включает в себя скрытые элементы (с display: none или visibility: hidden)

Доступной объект дерева доступности состоит из следующих свойств:

✅ role. Соответствует типу элемента, например, button или link

✅ name. Помогает лучше понять, что это за объект. Имя — это текст между открывающимся и закрывающимся html тегом, поэтому оно есть не всегда

✅ description. Дополнение к имени. Озвучивается, если выбрана такая настройка в скринридере.

Источник

#доступность #теория

Куки

Куки — это маленькие текстовые файлики, которые хранятся в браузере и для каждого сайта свой файлик. В таком файле информация хранится в формате ключ — значение, значение может быть зашифровано, а шифр знает только сервер.

С каждым запросом на сервер отправляется кука, а с ответом сервер её возвращает. Поэтому нужно следить за содержимым куки, чтобы она не весила слишком много и запросы не занимали много времени

Раньше куки часто использовались для хранения рекламных предпочтений пользователя, но если не ошибаюсь, то это сейчас не приветствуется. С появлением localStorage, о котором мы обязательно поговорим в одном из следующих постов, куки стали отходить на второй план, но совсем они не исчезли

В настоящее время самое частое применение куков — регистрация и авторизация. Например, когда человек хочет попасть в вк, то в поисковой строке он пишет адрес, а это своего рода get запрос на сервер и вместе с ним отправляется кука. Если в куке хранится информация о том, что пользователь авторизован, то его перебрасывает на страницу «новости», а если такой информации нет, то предлагают авторизоваться или зарегистрироваться

#теория

Приветствую!

Давненько не было постов… Почему так и что будет дальше - расскажу как-нибудь потом. А сейчас хочу ответить на вопрос, который мне недавно задали в реальной жизни: “Как войти в айти?”

Начнем с того, что сфера it очень огромная. Здесь есть специальности под любой вкус и цвет: для гуманитариев, технарей, интровертов, экстравертов, математиков, физиков, геймеров и т.д. И вот первое, что нужно сделать - это выбрать направление

Как выбрать направление? Правильно, погуглить! А если серьёзно, то могу посоветовать к просмотру вот это видео - https://youtu.be/WMxztZHDq18?si=gXURGPKCPsv6o14i , ну и никто не мешает поискать ещё какие-то видео и статьи на эту тему

Окей, вот вы смотрите или читаете про какое-то направление в айти и думаете: “хм, а вот это мне было бы интересно”. Супер! Тогда находите интервью какого-то специалиста из этой сферы и смотрите его. Вам интересно о чем говорит человек, хотелось бы в этом разбираться? Если да, то начинаете искать материалы по этой теме, это могут быть мастер-классы, бесплатные курсы, уроки для начинающих и прочее

Смотрите, повторяете, практикуетесь. Интерес не пропал? Тогда продолжаете развиваться в этом направление, ищите роадмапы, смотрите другие источники. Расширяйте кругозор в этой сфере. Учитесь учиться. Поймите, какая подача вам больше нравится, как и когда вы проще усваиваете новую информацию. Вступите в какое-нибудь сообщество, найдите напарника

Если на каком-то этапе вы потеряли интерес, то вернитесь на первый этап и попробуйте другое направление

После того, как вы четко определились с направлением, попробовали самостоятельно бесплатное обучение, можно при желание и возможности задуматься и о платном. Выбор курса - дело серьезное. Образование - это бизнес, а заработать хотят все. Так что не стоит идти на первый попавшийся курс. Поспрашивайте мнения у людей в сообществе, почитайте отзывы, посмотрите на подачу преподавателей. Посмотрите на программу, стоимость, длительность и другие условия. И после сравнения и анализа можно принимать ответственное и осознанное решение. Главное, не бросать и двигаться вперед и тогда вы войдете в айти и не выйдите:))

🖐 Всем привет! Сегодня хочу порассуждать о различных библиотеках, которые упрощают верстку при создании приложений

Раньше я была категорически против них, топила только за чистую верстку. Мне казалось, что разные либы типо бутстрапа просто портят код и уважающий себя верстальщик должен писать все самостоятельно. Я не понимала frontend разработчиков, которые говорят, что не любят верстать. Как можно это не любить? Это же такой кайф, так интересно! — думала я 😀

Когда я начала изучать React и стала писать какие-то приложения, пусть даже совсем небольшие, мне удалось следовать моей логике какое-то время, но потом я поняла, что что-то тут не так)

Во-первых, на верстку уходило много времени (этому я не удивилась, потому что действительно, хорошая верстка не делается быстро) и она стала менять (как бы это ужасно не звучало для прежней меня) отвлекать… То есть ты пишешь логику, реализуешь какой-то flow, думаешь куда и зачем девать данные — тебя захватывает этот процесс, а потом смотришь — и вообще не вырисовывается никакая верстка

Во-вторых, я в очередной раз сталкивалась с людьми, которым не нравятся верстка и они не хотят в этом разбираться, следовать всем правилам, соблюдать лучшие практики и т.д. Получается, что я как бы одна такая — повернутая на верстке

В-третьих, я понимаю, что бизнес платит деньги айтишникам за то, что они оптимизируют процессы и помогают предпринимателям зарабатывать больше. Какому-нибудь миллионеру плевать, сделана его платформа на SCSS или там используется Material UI. Если мы говорим про UI, то да, клиенту важно, чтобы это было удобно, красиво и не тормозило. Но как это сделано — пофиг! Бизнесу лучше, если ты потратишь час не на нативную верстку (если у него визуал не падает), а на решение более важных задач

Я сталкивалась с Material UI, Ant Design, и Radix UI. Вот последнее мне больше всего понравилось. Потому что в подобных рода библиотеках ты можешь очень многое редактировать и гибко настраивать. Ты имеешь полное право не для всего её использовать, ты можешь писать свои стили на свой вкус, там нет безумого количества лишних оберток и все хорошо с доступностью. Но ты экономишь время на том, что тебе не надо делать объемных и при этом шаблонных задач (типо модалок, радиокнопок, слайдеров и т.д.)

А Material и Ant сложнее настраивать под проект, некоторые стили не перезатираются и приходится писать вложенности, они создают много лишних оберток. И лично у меня создается ощущение, что раз уж ты используешь такую либу, то надо полностью создавай UI их средствами. А вот радикс — идеальный баланс между чистой версткой и готовыми решениями (на самостоятельное написание которых у тебя ушла бы куча времени)

А что вы думаете?

🖐 Всем привет!

Сегодня хочу рассказать о том, почему я пишу на scss, но использую css переменные

1️⃣ С css переменными можно работать в js, то есть считывать и присваивать им значения. Иногда это очень удобно и нужно

2️⃣ css переменными можно управлять в браузере. Можно использовать другую переменную или просто посмотреть, какие есть варианты

3️⃣ Мне всегда было интересно, как реализуется переключение между темами на сайте? И я была приятно удивлена, когда увидела, как это делается с css переменными. Просто в зависимости от data-атрибута переприсваивается значение переменной!

4️⃣ В css переменные позволяют указывать резервное значение. Узнала об этом недавно и пока не пользовалась, но звучит круто)

5️⃣ Область видимости. Создаём глобальную переменную, в блоке x переприсваиваем ей значение и оно будет оставаться таким только в блоке x

Единственное, что для меня является проблемой в css переменных — это то, что я не могу их использовать с rgba так, как scss переменные

$white: #fff
.block {
background-color: rgba($white, 0.5);
}

Вот если white будет css переменной, то такая запись не сработает

Но я уверена, что смогу найти оптимальное решение и может быть напишу об этом пост)

#верстка

🖐 Всем привет!

Сегодня речь пойдет о единицах измерения в css. Поговорим о том, какие и когда стоит использовать

✅ px
Ну, с ними все понятно. Это фиксированная единица измерения, которую мы используем чаще всего, знаем лучше всего и начинали изучение этой темы именно с ней). Проблема тут заключается в том, что верстка на пикселях плохо адаптируется и мы вынуждены писать больше кода 

✅ em
Это относительная единица измерения к размеру шрифта текущего или родительского элемента.  Здесь важно не запутаться, какой размер шрифта влияет на элемент. И еще одно неудобство связано с тем, что в большинстве макетов используются px и нам будет необходимо перевести их в em. Зато меньше кода потребуется для адаптива

✅ rem
Тоже относительные и тоже относительно размера шрифта, но уже шрифта в браузере по умолчанию или того font-size, что задан для тега html

✅ %
Думаю, с этой относительной единицей многие работали. Но тут нужно учитывать, относительно каких свойств они будут высчитывать. Например, если вы указываете ширину в процентах, то это значение будет относительно ширины родительского элемента. Высота — относительно высоты, высота строки — относительно размера шрифта 

✅ vw, vh
vw — относительно ширины окна браузера, vh — относительно высота. То есть 100vh — весь экран по высоте

✅ vmin, vmax
vmin — относительно наименьшего из vh и vw, а vmax — наибольшее. То есть 50vmin — будет половина от высоты или ширины экран (от того, что меньше)

✅ fr
Мало кто вспоминает об fr, когда речь заходит о единицах измерения, но мы их часто используем с гридами

Что из этого вы чаще всего используете?)

#верстка

Недавно пришлось плотно поработать с Яндекс картами, сделала вот такую штуку.

Вообще не имею большого опыта с ними. Раньше боялась таких столкновений и старалась всеми силами избегать их

Но несколько раз этого не удалось, пришлось разбираться) Видео, чат GPT, stack overflow, ютуб — всё шло в ход дела. Ну и вроде помогло, смогла перекрасить карту 😀

А в этом проекте задача еще больше усложнилась: перекрасить, убрать инструменты, добавить кастомные пины, сделать балуны и прикрутить фильтрацию 😱

Ну ничего. Глаза 👀 боятся, а руки делают. Проявила фантазию, подключила программистское мышление 🙇 и вот она, красота!

Но на самом деле, что мне не нравится (или я не разобралась) в версии API 2.1 нельзя красить карту, а в версии 3.0 можно легко (относительно) перекрасить, но хуже документация, меньше и сложнее примеры и код какой-то менее лаконичный получается...

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

#карты #работа #верстка

Браузеры

Когда я только начинала погружение в IT (лет 7 назад), однозначным фаворитом был Chrome, для разработки все рекомендовали только его.

С тех пор я им и пользуюсь. Все устраивает, все нравится. Но в последнее время заметила, что коллеги и некоторые блогеры перешли на Firefox и считают его лучше, чем Chrome.

Вот и захотела я изучить этот вопрос. По поверхностному ресерчу подробной информации не нашла. Но из того, что прочитала:

📌 В хроме многие жалуются на большое потребление памяти и слабую конфиденциальность (мол, у лисы с этим значительно лучше).

📌 По скорости раньше лидировал хром, а сейчас примерно одинаково. Обновления тоже выходят часто и там и там. И синхронизацию можно настроить везде.

📌 С инструментами для разработчиков везде полный порядок. Но так было не всегда, в этом плане Firefox тоже догнал Chrome.

📌 Если правильно поняла, то хром поддерживает больше фич и одно из его основных преимуществ — магазин плагинов, но думаю, что в фаере этот вопрос тоже решается.

📌 И последнее, но не по важности. Chrome идеально (почти) настроен из коробки, а Firefox предоставляет огромное количество настроек и кастомизаций под любой вкус и цвет, но просто не всем оно надо.

Мой вывод таков. Лучшего решения нет. Нужно пользоваться тем, что удобно именно тебе. Я ради эксперимента попробую перейти на Firefox (хотябы частично) на некоторое время. Нет, я не разочаровалась в Chrome, просто мне чуток приелся его дизайн и хочется попробовать что-нибудь новенького.

А каким браузером пользуетесь вы? И что можете сказать про мои мысли, может дополните меня в комментариях?)

Недавно забила на codewars. Его задачи мне казались, как из другого мира, то есть очень отдаленными от того, чем люди занимаются на работе

И я перешла на leetcode. Там сложнее, но задачи более реалистичные и на собесах часто оттуда идеи берут

Сначала прорешала 10 задач на массивы, сейчас перешла к строкам. Не всегда справляюсь сама, иногда приходится обратиться к Gpt. И всегда прошу его проверить мое решение и предложить улучшение. Потому что иногда решаю слишком запутанно и проблема только в выбранном способе, а иногда даже думаю не в ту сторону

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

И еще на регулярной основе (раз в неделю) буду решать задачи по typescript. Поделюсь с вами вот таким ресурсом, может будет кому-то полезно и тоже захотите выработать такую привычку)

Начала читать книжку про паттерны. Пока встречаются те, с которыми я знакома на практике, в таком случае теоретическая информация очень хорошо откладывается 😀

А еще один паттерн — стратегия, недавно применяли в рабочем проекте. Если интересно, могу поподробнее рассказать об этом кейсе

#книги #паттерны #теория

Посмотрела на выходных собеседование на канале Ulbi TV, нашла для себя несколько сфер для прокачки и зарядилась позитивом и уверенностью от собеседуемого)) Классный, веселый парень, думаю, подтянет харды и все будет у него хорошо

А еще Ulbi интересные задачки предложил, отвлеклась немного от руттиных тасок на работе 🧠

А как у вас выходные прошли?)

https://youtu.be/OZPOO79Y4jk?si=O6LW-F9Xea__095-