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

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

Изучение технического стека проекта

Работа с Typescript и NextJS в течение последних трех месяцев была ценным опытом для меня как разработчика. По сути, NextJS предоставляет платформу, которая упрощает и оптимизирует процесс создания приложений React, отображаемых на стороне сервера, и позволяет мне с большей легкостью создавать более сложные веб-приложения.

Хотя я уже был знаком с React, переход на NextJS улучшил мои навыки работы с этой библиотекой, сделав меня более эффективным и результативным разработчиком.

Мне также разрешили изучить Emotion , популярную библиотеку CSS-in-JS. Emotion позволяет разработчикам записывать стили CSS как объекты JavaScript, что упрощает управление стилями и гарантирует их правильное применение.

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

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

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

Среди всех этих инструментов работа с безголовой CMS, такой как Sanity Studio, была для меня чем-то совершенно новым, и поначалу я не был уверен, что когда-нибудь смогу понять эту концепцию.

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

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

Мне пришлось не торопиться, чтобы понять базовую структуру данных и схему, связанную с работой с CMS. Sanity Studio предоставляет модель данных с широкими возможностями настройки, что позволяет нам определять структуру контента в соответствии с потребностями клиента.

Кроме того, решения CMS, такие как Sanity Studio, обеспечивают более простой и интуитивно понятный интерфейс для клиентов, поскольку они могут управлять своим контентом напрямую через удобный интерфейс, а не полагаться на разработчиков для внесения этих изменений.

К счастью, эти технологии поставляются с богатой документацией и ресурсами. Потратив время на то, чтобы понять, задать вопросы моим товарищам по команде, поучаствовать в сеансах парного программирования и изучить, как работает Sanity, я получил прочную основу для эффективного использования таких инструментов, как Sanity Studio.

Доступность, удобство использования и инклюзивность

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

Включение доступности в процесс разработки — полезный и инклюзивный подход к веб-разработке.

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

• познавательный
• неврологический
• Физический
• визуальный
• Речь
• слуховой

Мне как дипломированному разработчику казалось сложным придумывать способы сделать мои проекты доступными, не говоря уже о клиентском проекте. Мои познания в области специальных возможностей ограничивались добавлением замещающего текста к изображениям, а о метках ARIA я узнал только недавно.

Это хорошо, но недостаточно.

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

1. Lighthouse Accessibility Tool : я считаю, что это первый шаг, который должен сделать каждый для улучшения своих веб-сайтов. Lighthouse — это встроенный инструмент в Chrome Developer Tools, который проверяет веб-страницы по различным категориям, таким как производительность, SEO, лучшие практики и, самое главное, доступность. Аудит доступности проверяет наличие таких проблем, как отсутствие замещающего текста , низкая цветовая контрастность, структура заголовков и многое другое.
2. Расширение Axe Accessibility Tool : Axe — это бесплатное расширение для браузера, предназначенное для подробного тестирования доступности веб-сайтов. Инструмент выделяет любые нарушения доступности и дает рекомендации по их устранению. Он работает на axe-core, одном из самых популярных механизмов тестирования доступности, разработанном Deque.
3. Использование Apple VoiceOver или аналогичного программного обеспечения для чтения с экрана также является невероятно полезным инструментом проверки доступности. Это позволяет разработчикам увидеть свой веб-сайт глазами пользователей с нарушениями зрения и может помочь выявить проблемы, которые не могут быть обнаружены инструментами автоматического тестирования.
4. Контрольный список проекта A11Y . В целом, этот проект является отличным ресурсом, который можно добавить в закладки для обеспечения доступности всех вещей, но контрольный список практичен, организован и сжат в список дел. Он включает в себя такие задачи, как проверка содержимого в специализированных режимах просмотра, увеличение размера текста и обеспечение возможности навигации по веб-сайту с использованием только клавиатуры или других вспомогательных технологий.

Заключение

Независимо от того, работаете ли вы с NextJS, Emotion, CircleCI, Sanity Studio или любым другим инструментом, важно подходить к каждому из них с любознательностью и готовностью учиться. По мере накопления опыта и развития навыков вы обнаружите, что можете создавать более сложные и инновационные проекты, и станете более уверенными в своих способностях разработчика. Убедитесь, что ваши проекты удобны и интересны для всех, независимо от их способностей. Доступность является важным аспектом веб-разработки, который нельзя упускать из виду.

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

Ресурсы:

Консорциум всемирной паутины

Веб-доступность для начинающих

MDN — Доступность

Изучите специальные возможности на web.dev

Я хотел бы услышать о вашем опыте работы с интерфейсными инструментами и доступностью, поэтому, пожалуйста, напишите их в комментариях ниже!