ПРОГРАММИРОВАНИЕ / UI-РАЗРАБОТКА
6 инструментов, которые можно добавить в свой портфель разработчика веб-интерфейса
В этой статье рассказывается о некоторых интересных инструментах, с которыми я работал и которые со временем начал ценить. Рассмотрите возможность использования данных ссылок для доступа к полной информации на страницах документации для любого данного инструмента.
1. Подсказки для начинающих.
Учебник по Github - это система дизайна CSS, на которой работает GitHub. Пакет всплывающих подсказок для начинающих придает всплывающим подсказкам действительно плавный вид.
Использование:
npm install — save primer-tooltips
Скопируйте файл node_modules / primer-tooltips / build / build.css в удобное место в своем приложении, а затем сделайте ссылку на него в своем HTML. (Попробуйте переименовать его в более удобное имя, например, primer-tooltips.css).
Пример реализации:
<span class=”tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left” aria-label=”Notifications”> <i tabindex=”2" class=”ncw-ctrl-icon fas fa-bell”></i> </span>
-s в значении tooltipped-s атрибута class определяет направление всплывающей подсказки. Вы можете использовать следующие стороны света, чтобы указать направление всплывающей подсказки:
- `.tooltipped-n` - `.tooltipped-ne` - `.tooltipped-e` - `.tooltipped-se` - `.tooltipped-s` - `.tooltipped-sw` - `.tooltipped-w` - `.tooltipped-nw`
Вот и все. Облегченное решение размером 3,46 КБ определенно стоит попробовать!
2. Живая перезагрузка.
Я большой поклонник VS-Code. Я люблю это. Если вы еще этого не сделали, подумайте об использовании, это может сработать и для вас! Live Server - это плагин живой перезагрузки для кода VS, который поддерживает как статические, так и динамические страницы для локальной разработки.
Плагин обнаруживает изменения файлов в рабочей области разработчика и автоматически перезагружает вашу страницу в браузере. Многозадачность временами может быть сложной, а также немного утомительной. Если вы можете сэкономить несколько секунд, которые в противном случае были бы использованы, нажав одновременно кнопку сворачивания в среде IDE и кнопку перезагрузки в браузере, я бы посоветовал сделать это. Сосредоточьтесь на том, что действительно важно. Live Server - это инструмент повышения производительности, который гарантированно окажет значительное влияние в долгосрочной перспективе.
Чтобы ваш плагин реального сервера обнаруживал изменения файла CSS, используйте следующую конфигурацию в файле settings.json вашего vscode:
{
“liveServer.settings.fullReload”: true
}
3. Расширенные дисплеи.
Я использую E236 HP Elite Display в качестве расширенного дисплея для своего ноутбука. Это не моя мечта, но что касается многозадачности, то она выполняет свою работу.
Если IDE открыта на дисплее ноутбука, а браузер открыт на дополнительном дисплее, это идеальная установка. Объединение этого с плагином live reload делает процесс разработки беспроблемным. Это автоматически приводит к минимальным затратам времени на переключение между окнами, а также к экономии времени!
4. Clipboard.JS
Я не знаю, как вы относитесь к установке для свойства CSS user-select значения none, но я уверен, что вы могли подумать об использовании его хотя бы один раз.
.target-element {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
Стандартного способа достижения этой цели не существовало, поэтому да, мы должны использовать все вышеперечисленные резервные варианты. Если вы обнаружите, что отключаете выделение текста, я бы порекомендовал предоставить вашим пользователям альтернативный способ доступа к соответствующим текстовым полям. ClipboardJS поможет вам в этом:
Мне пришлось настроить файл primer.css, чтобы всплывающая подсказка скопировано! включалась только при событии щелчка. Попробуйте закомментировать псевдоселекторы .tooltipped: hover :: before, .tooltipped: hover :: after в файле primer-tooltips.css.
5. Инструменты разработчика для редактирования в реальном времени.
Инструменты разработчика - это тот инструмент, без которого вы никогда не обойдетесь во время разработки. Я использую Chrome. Одна из функций, которую я со временем научился ценить, - это функция предварительного просмотра в Инструментах разработчика.
Это удобно, когда вы хотите хорошо проверить, как определенный набор свойств будет соответствовать данному элементу. Функция редактирования в реальном времени превосходит необходимость вносить изменения в файл с последующей перезагрузкой в любое время! Движок V8 в Chrome позволяет выполнять JS напрямую через консоль Dev Tools, что позволяет предварительно просмотреть функции манипулирования DOM. Вы также можете использовать консоль для запуска JS-тестов на основе пользовательского интерфейса и простого старого JS!
6. Prefixfree.JS
С тех пор, как в 2008 году Chrome открыл исходный код движка Chromium, Интернет в целом стал более привлекательным. Браузеры становятся лучше с каждой минутой. Поскольку Microsoft недавно попрощалась с IE и переходом к власти Edge, будущим пользователям Windows 10 гарантирован более плавный просмотр. Браузеры Safari от Apple и Firefox тоже довольно гладкие.
Однако все еще довольно значительное количество конечных пользователей используют устаревшие браузеры. На разработчика остается огромная ответственность за то, чтобы приложение отображалось единообразно для всей пользовательской базы. Если вы используете прекомпилятор CSS, такой как Less или Sass, они позволяют вам писать миксины, что предотвращает монотонную переписывание префиксов поставщиков повсюду. В качестве альтернативы -prefix-free позволяет вам везде использовать только свойства CSS без префиксов. Он работает незаметно, добавляя префикс текущего браузера к любому коду CSS только тогда, когда это необходимо. Позволить инструменту делать всю работу за вас - это на один шаг ближе к освобождению от ада префиксов CSS. Вы можете узнать больше о -prefix-free здесь.
Спасибо!
Что ж, если вы зашли так далеко, то вы коснулись некоторых инструментов, с которыми я работал в течение значительного количества времени, работая в качестве разработчика пользовательского интерфейса.
И пока вы здесь, вот дополнительный совет:
Знайте свои основы.
Разработчики, поддерживающие стороннюю библиотеку, скорее всего, будут использовать новейшие языковые функции для этой библиотеки. Чтобы идти в ногу со временем, вы также должны быть в курсе этих функций. Чем удобнее вы используете языки в вашем наборе языков разработки, тем проще вам будет работать с этими библиотеками, в частности интегрируя и настраивая их в соответствии с вашими конкретными потребностями.
На этом пока все,
