[ad_1]
В нашей индустрии не так много спикеров, чья страсть к фронтенд-разработке столь же заразительна, как у Сары Суэйдан: ее семинары и доклады настолько переполнены советами — не в последнюю очередь из-за головокружительной скорости, с которой она их преподносит, — что они регулярно оставляют слушателей с мыслями. умы взорваны (и нуждаются в облачном хранилище для хранения ее мудрых слов!). Впечатляющее соотношение слов в секунду даже побудило одного делегата написать в Твиттере, как здорово было бы, если бы Суэйдан и Эминем соревновались в рэп-баттле.
Наиболее известная своей выдающейся работой с CSS и SVG (фактически, ее семинар по SVG является самым популярным), Соуэйдан разрабатывает новый семинар, который дебютирует на Generate London в сентябре и посвящен проектированию и созданию универсальных Компоненты пользовательского интерфейса.
«Некоторое время назад Зак Лезерман ретвитнул кого-то, кто просил компоненты Vanilla JavaScript без зависимостей», — вспоминает Суэйдан. «Зак сказал, что было бы очень хорошо, если бы у нас был репозиторий универсальных компонентов, поэтому я провел поиск по слову «универсальный» и пришел к следующему определению: универсальный компонент — это повторно используемый компонент, который вносит свой вклад в общее взаимодействие с пользователем и улучшает его. интерфейс. Он доступен и включает лучшие практики с точки зрения дизайна и кода UX. В идеале он не имеет зависимостей, когда и где это возможно, и может быть подключен к любой или многим средам и контекстам».
Универсальные компоненты не требуют специальной настройки или фреймворков JavaScript, которых Суэйдан всегда старается избегать, если только они не являются абсолютно необходимыми. Каждый компонент имеет свои особенности UX. В качестве примера Суэйдан указывает на статью Эрика Бейли в Smashing Magazine, которую она только что прочитала, в которой он объясняет, почему не следует использовать атрибут placeholder. (откроется в новой вкладке).
«Это фантастический пример того, что я собираюсь осветить на семинаре», — с энтузиазмом говорит она. «Рекомендуется не использовать заполнитель при создании полей ввода, потому что он создает много проблем с доступностью и дизайном пользовательского интерфейса. Поэтому, если вы собираетесь отказаться от заполнителей, вам придется предоставить более доступное решение».
Soueidan планирует сделать именно это с каждым компонентом, на который у нее будет время поработать во время семинара (включая кнопки, мобильные взаимодействия, системы навигации, подсказки и аккордеоны). Участники изучат все, от процесса принятия решений UX до создания компонента с учетом разметки, семантики и доступности.
«Я рекомендую [you] начинайте тестирование доступности на уровне компонентов, когда это возможно. Не ждите, пока вы создадите весь пользовательский интерфейс, а затем приступайте к тестированию. Когда вы разбиваете вещи на более мелкие части, вы получаете лучшие результаты, и вам не кажется, что это большое бремя».
Одним из любимых компонентов Суэйдан является форма, которую она любит стилизовать с помощью SVG, особенно флажки и переключатели. Типичным способом их стилизации будет использование спрайта PNG, который требует дополнительного HTTP-запроса, или псевдоэлементов CSS, что означает, что для этого требуется написать гораздо больше CSS. Однако Soueidan рекомендует использовать SVG.
«Добавьте путь SVG, который будет встроен в HTML, затем, когда флажок установлен, анимируйте его, используя технику рисования линий, и объедините его с родственным селектором в CSS. Он обеспечивает действительно изящную анимацию, когда пользователь взаимодействует с флажком, и требует только встраивания очень маленького SVG в ваш HTML — без дополнительного HTTP-запроса и одной строки CSS. Это визуально более привлекательно!»
Ей нравится использовать SVG нетрадиционными способами, например, для замены функций CSS, которые недостаточно поддерживаются браузером. Примером этого является свойство object-fit, которое определяет, как элемент реагирует на высоту и ширину своего блока содержимого, и позволяет вам обрезать и масштабировать изображения, давая контроль над тем, как он сжимается и растягивается внутри своего блока.
«Если вам нужна поддержка какой-либо версии Internet Explorer, это не сработает, — предупреждает Суэйдан. «Но с SVG вы можете использовать самые мощные атрибуты: атрибут viewBox и атрибут saveAspectRatio, мои абсолютные фавориты. С их помощью можно получить тот же результат, что и с подгонкой объекта, но вместо использования CSS вы используете SVG и получаете поддержку браузера вплоть до IE9».
Подобные советы просто вырвались у нее из головы, но Суэйдан говорит, что чем больше она работает с CSS и SVG, тем больше ей сложно отличить то, что является обычной практикой, от новых методов, созданных ею самой. Это означает, что она не всегда осознает, насколько полезными они могут быть для других разработчиков. «Многие вещи, которые я использую в своем рабочем процессе и считаю само собой разумеющимися, все еще новы и могут считаться действительно изящными трюками для кого-то другого, но я действительно плохо разбираюсь в них. Просто у меня их слишком много».
Как вы, наверное, догадались, Суэйдан не из тех, кто добавляет модные новые фреймворки в свой рабочий процесс, не будучи уверенным, что они повысят эффективность сайта. Всякий раз, когда выпускается новая функция, она не вникает в нее, а сначала пытается получить общий обзор, чтобы определить, поможет ли она ей в ее работе. Она была хорошо знакома с Vue и React около года назад, но по-настоящему начала изучать один из них только тогда, когда решила, что ей нужен JavaScript-фреймворк, как для клиентских, так и для личных проектов.
«Я выбрала Vue, потому что он намного доступнее и ближе моему мышлению, — объясняет она. «Сдвиг парадигмы не так силен, как в случае с React. Я просто не могу заставить свой мозг думать в стиле React, тогда как Vue намного ближе к моему образу мышления».
Суэйдан также не нравится то, как используется React, что побудило ее написать в Твиттере, что React — это новый jQuery, утверждение, которое многие неправильно понимают. «Некоторые люди думали, что я ненавижу React, но я определенно не это имела в виду», — поясняет она.
«Похоже, что React становится предпочтительным выбором при создании компонентов для многих разработчиков, даже если он излишен и совершенно не нужен. Это похоже на то, когда все подключали jQuery ко всем своим проектам, хотя ванильного JavaScript или даже просто CSS было более чем достаточно для этой задачи. Мне просто не нравится его неправильное использование».
(откроется в новой вкладке)
Сара Суэйдан выступит с докладом «Использование CSS (и SVG) на благо UX» на Generate. В нем она покажет вам, как UX оказывает прямое влияние на то, как себя чувствует пользователь, находят ли они его восхитительным и, самое главное, могут ли они использовать его правильно.
Нужно обновить набор инструментов для веб-дизайна? Ознакомьтесь с нашими руководствами по лучшим услугам веб-хостинга и инструментам для создания веб-сайтов.
Generate London проходит с 19 по 21 сентября 2018 года. Получите билет прямо сейчас (откроется в новой вкладке).
Эта статья была первоначально опубликована в номере 310 журнала net, самого продаваемого в мире журнала для веб-дизайнеров и разработчиков. Купить выпуск 310 (откроется в новой вкладке)или подписаться на сеть (откроется в новой вкладке).
Статьи по Теме:
- Изучите React с помощью этих пяти факторов
- 4 способа создать модульный и масштабируемый CSS
- Изменение игры: Сара Суэйдан о новых веб-технологиях (откроется в новой вкладке)
[ad_2]
