Прошел еще один год, и я снова имел честь просмотреть архивы еженедельных информационных бюллетеней Web Tools за последние 12 месяцев, чтобы отыскать интерфейсные инструменты, которые читатели сочли наиболее интересными в 2021 году. Итак, , чтобы начать 2022 год, я составил список из 60 самых популярных инструментов. Я уверен, что здесь есть как минимум один или два из перечисленных, которые вы можете начать использовать в своих проектах уже сегодня.
Некоторые из этих интерфейсных инструментов очень практичны, в то время как другие, вероятно, попали в этот список только из-за любопытства (которое я основываю на количестве уникальных кликов). А поскольку многие из инструментов, которые входят в мои списки на конец года, довольно новые, я думаю, что это хороший показатель того, какие интерфейсные инструменты будут популярны в наступающем году.
Open Props предоставляет набор созданных вручную токенов дизайна, состоящих из пользовательских свойств CSS. Я вижу, что такого рода вещи гораздо более распространены из-за использования этой конкретной функции CSS. Они позволяют добавлять небольшие наборы полезных групп настраиваемых свойств, таких как анимация.css, borders.css, fonts.css, zindex.css и т. д., и скоро появятся новые. Или вы можете просто использовать основной файл Open Props, чтобы получить все сразу.
Это определенно один из интерфейсных инструментов, за которым стоит следить, и, возможно, даже хороший, чтобы внести свой вклад. to, если вы хотите помочь создать библиотеку доступных токенов.
59. СледующийUI
Современная библиотека React, которая использует Stitches, популярное решение CSS-in-JS, и включает в себя готовые светлые и темные компоненты пользовательского интерфейса, а также цветовую палитру по умолчанию, которая может быть полезна для быстрого создания целевых страниц или другой контент, изначально не связанный с каким-либо брендингом.
В настоящее время он находится на стадии альфа-разработки, поэтому стоит следить за ним в следующем году.
58. Допефолио
Если вы ищете простой способ собрать собственное портфолио разработчиков, Dopefolio — это быстрое решение, оптимизированное для SEO и имеющее высокие баллы Lighthouse.
Живая демонстрация дает вам представление о том, как она выглядит (отзывчивая и все такое), и включает компонент выбора цвета, чтобы вы могли жить. проверьте предпочитаемый вами основной цвет для шаблона.
57. Виззу
Это уникальный инструмент, вошедший в список интерфейсных инструментов этого года. Vizzu — библиотека JavaScript с открытым исходным кодом для создания анимированных историй данных и визуализаций. Возможно, это популярно из-за очевидной потребности в создании и встраивании медицинских данных в наши дни.
Эта библиотека позволяет легко создавать статические диаграммы данных, анимированные диаграммы и истории данных. Вы можете увидеть некоторые живые примеры анимированных диаграмм или историй данных, которые включают историю данных, показывающую, у какого гостевого персонажа было больше всего реплик на протяжении всего сериала Друзья.
56. 10015 инструментов
Каждый год я нахожу несколько интерфейсных инструментов такого типа. 10015 Tools — это набор интерфейсных инструментов, а не один инструмент. Он включает в себя текстовые инструменты, инструменты для изображений, инструменты CSS, инструменты кодирования (например, минификаторы), инструменты цвета, инструменты социальных сетей и некоторые другие в разных категориях.
Это определенно одно из наиболее полных комплексных решений, которые я видел, поэтому я уверен, что вы найдете несколько полезных интерфейсных инструментов, к которым вы можете вернуться.
55. Сноуб
Наборы иконок всегда популярны, и каждый год я натыкаюсь на дюжину новых. Он включает в себя оптимизированные значки SVG, многие из которых имеют встроенный анимированный эффект при наведении курсора на значок (например, значок открытого/закрытого конверта).
Как и на многих веб-сайтах со значками, вы можете выполнять поиск по ключевому слову или фильтровать по категориям, одной из которых является категория «бренд» со значками для Twitter, Facebook, Vimeo, YouTube, Snapchat и т. д.
54. Хвосты
Вот первый инструмент на основе Tailwind, попавший в список; то, что было тенденцией последних нескольких лет, поскольку популярность Tailwind продолжает расти. Этот интерфейсный инструмент представляет собой конструктор страниц с функцией перетаскивания для проектов, использующих Tailwind CSS.
Он включает в себя два бесплатных «блока» для каждой из 15 категорий, так что здесь есть приличное количество бесплатных вещей, и вы можете разблокировать остальные за ежемесячную плату.
53. MapLibre
Эта картографическая библиотека с открытым исходным кодом была запущена в марте, и в течение года ее популярность росла. Он включает библиотеку JavaScript, а также SDK для отображения карт в приложениях для iOS и Android.
Документы включают множество примеров, использующих JavaScript, если вы хотите увидеть, что возможно с веб-интерфейсными инструментами.
52. Репозиторий SVG
SVG Repo попал в этот список, основываясь только на цифрах. Это хранилище более чем 300 000 бесплатных оптимизированных изображений и значков на основе SVG, большинство из которых лицензированы для коммерческого использования.
Каждый выбранный вами значок указывает, к какому типу лицензии он относится. Вы можете выполнять поиск по ключевому слову и «сохранять» значки в избранное для последующего использования (вход в систему не требуется).
51. Анимированные фоны
Этот инструмент вошел в число 60 лучших в этом году, но, вероятно, это не самый практичный интерфейсный инструмент из всех. Как я уже сказал в начале, на некоторые вещи кликают просто из чистого любопытства. Это галерея анимированных фонов, взятых из различных демонстраций CodePen.
Галерея полезна тем, что она отображает фоны в виде предварительно записанных видео, поэтому вам не нужно беспокоиться о загрузке всех демонстраций и сбой вкладки браузера. Используйте их экономно, если вообще когда-либо, так как они часто используют большое количество JavaScript и CSS.
50. Пико.css
Это другой тип CSS-фреймворка по сравнению с тем, что сейчас популярно. Это что-то вроде инструмента против Tailwind и больше похоже на начальный CSS-файл (например, сброс), чем на полноценный фреймворк.
Pico.css предоставляет элегантные стили по умолчанию для всех нативных HTML-элементов (которые вы можете просмотреть здесь) без необходимости добавлять множество классов в ваш разметка — и все это занимает менее 10 КБ в минимизированном виде и сжатом gzip.
49. Кодирование шрифтов
Кодирование шрифтов кажется новой захватывающей тенденцией в последнее время, и CSS-Tricks воспользовались этим с помощью этого небольшого интерактивного информационного приложения.
Выберите шрифт слева, чтобы отобразить пример кода, информацию о шрифте (лигатуры, курсив и т. д.), стоимость (большинство из них бесплатны), а также варианты отображения примера кода для HTML, CSS или JavaScript.
48. UI-неоморфизм
Эта библиотека React основана на старой тенденции скевоморфизма, которая, по-видимому, вышла из моды несколько лет назад. Этот тренд возвращается? Возможно нет. На самом деле этой библиотеке React около двух лет, хотя я впервые поделился ею в прошлом году.
Библиотека включает в себя множество различных компонентов, которые реализуют «неоморфизм». Интересно посмотреть, но может не подойти для многих проектов.
47. Красивые кнопки CSS
Практически каждому приложению или веб-сайту нужны кнопки, поэтому подобная коллекция всегда выглядит хорошо. Многие из них отличаются от того, что вы, вероятно, видели в других местах.
Многие кнопки имеют интересные эффекты наведения, и вы можете легко скопировать и вставить HTML и CSS для любой отдельной кнопки прямо на странице.
46. Шейпер
Этот интерактивный инструмент позволяет изменять различные настройки пользовательского интерфейса прямо на странице для создания различных элементов страницы. После того, как вы настроили все по своему усмотрению, вы можете получить код, который использует пользовательские свойства CSS.
Вы можете переключаться между демо-представлением и представлением «спецификации» (то есть код вместе с другой полезной информацией). Этот инструмент уделяет особое внимание типографике наряду с остальными стилями пользовательского интерфейса, что является важной частью правильного отображения макета.
45. Престиж
Это текстовый HTTP-клиент в браузере, аналогичный Postman, но без интерфейса. Это позволяет вам определять запросы в виде простого текста, который вы можете при желании сохранить как Gist. Он включает изолированное управление файлами cookie и имеет как темный, так и светлый режимы.
Как объясняет автор: «Я создал Prestige, потому что мне нужно было такое приложение для работы […] и работы с внешними API».
44. HTML.cafe
Это, вероятно, самый простой инструмент во всем списке. HTML.cafe — более или менее CodePen бедняка, за неимением лучшего термина. Я не думаю, что людям будут интересны подобные вещи, поскольку уже есть мощные инструменты, которые уже делают то, что он делает. Тем не менее, это очень простой HTML-редактор с предварительным просмотром в реальном времени.
Нет отдельных окон CSS или JavaScript, как в CodePen, но вы можете легко включить их в
