Whimsical — онлайн-сервис для молниеносного визуального общения в Сети

С его помощью можно создавать и вести совместные блок-схемы, заметки на стикерах, а также интеллект-карты

Стоимость: #бесплатно (но есть платные тарифы)

#web #mindmap #team

Ionicons — пакет симпатичных иконок с открытым исходным кодом и лицензией MIT

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

Стоимость: #бесплатно

#icons #mit

Write.as — простенькая платформа для написания и публикации текстов

Один из главных плюсов — сервис не требует регистрации. Достаточно открыть сайт в браузере и начать переносить мысли в текст

Стоимость: #бесплатно (но есть платные тарифы)

#web #текст

Tailwind.run() — онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки

С её помощью даже можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах. Имеется вход по личному GitHub-акканту

Стоимость: #бесплатно

#css #github

Meraki UI — набор прекрасных компонентов Tailwind CSS

Предложенные варианты поддерживают RTL-языки. Авторы проекта даже прикрутили к ним популярную ныне «тёмную тему»

Стоимость: #бесплатно

#css #web

Wireflow — бесплатный онлайн-инструмент для создания красивых прототипов пользовательского потока

Стоит отметить, что проект имеет открытый исходный код и не требует каких-либо навыков работы в графических редакторах (в том числе в Photoshop)

При создании прототипов можно выбрать из 113 потоков, разделённых на 10 категорий

Стоимость: #бесплатно

#web #open_source

Icon Scout Editor — онлайн-сервис для создания и редактирования SVG-иконок онлайн

Инструмент позволяет создавать иконки из SVG-файлов очень простым способом

Достаточно просто загрузить картинку, отредактировать цвет и сохранить в форматах PNG, SVG или PDF

Стоимость: #бесплатно

#web #editor #svg

CoderNotes — платформа для заметок разработчиков

Здесь можно сохранять фрагменты собственного кода, которые могут понадобиться в будущем

С помощью сервиса можно централизованно хранить сложные или повторяющиеся куски кода, а также вопросы, возникающие при разработке, и ответы на них

Стоимость: #бесплатно (но есть платные функции)

#web #code

Acme Logos — набор качественных логотипов-плейсхолдеров

Они отлично подойдут в тех случаях, когда у вас ещё нет собственного варианта, а проект уже начал разрабатываться

Стоимость: #бесплатно

#web #лого #бесплатно

Retool — это быстрый и простой шаблонизатор форм

С его помощью можно подключать созданные на платформе формы к уже имеющимся базам данных и API

Есть также поддержка подключения к Postgres, REST API, GraphQL, Firebase, Google Sheets и т.д

Стоимость: #бесплатно (но есть платные функции)

#web #api #шаблонизатор

Vue-multiselect — возможно, самое полное решение для работы с формами в Vue.js без jQuery

Инструмент позволяет работать с совершенно разными типами форм: как одиночными, так и множественными. Отдельно стоит отметить лёгкую в освоении документацию проекта

Стоимость: #бесплатно

#vuejs #open_source

Vivid.js — коллекция из более 90 бесплатных наборов SVG-иконок svg с открытым исходным кодом

Они подготовлены таким образом, что их сразу же можно использовать в Sketch или JS-проектах, созданных с помощью React и npm

Что интересно, авторы проекта с удовольствием принимают заявки на создание новых иконок

Стоимость: #бесплатно

#иконки #svg #js

UI Print — коллекция шаблонов каркасов, макетов и скетчпадов с точечной сеткой

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

Стоимость: #бесплатно

#дизайн #бесплатно

TACHYONS — отличный инструмент для создания красивых, отзывчивых и читаемых интерфейсов

У него есть сразу несколько методов для настройки: API, работа с CSS-переменными и изменения в theme.js

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

Стоимость: #бесплатно

#css #web

SVG Generator — простенький инструмент для генерации волнистых html-элементов

Их можно использовать для симпатичных переходов между разделами на сайте

Делается всё максимально просто — необходимо лишь «взять» красные маркеры и создать с их помощью кривую, которая вам понравится

Стоимость: #бесплатно

#web #html #svg

Styled components — одно из популярных решений для написания кода методом CSS in JS

Инструмент лишает вас необходимости использовать className, при этом появляется простая динамическая стилизация и StylisJS «под капотом»

С основами Styled components вас познакомят на главной странице проекта. А дальнейшее его изучение можно пройти с помощью приятной официальной документации

Стоимость: #бесплатно

#css #js #web

Site palette — браузерное расширение для создания комплексных палитр

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

Стоимость: #бесплатно

#web #расширение #цвета

Stripo — бесплатный конструктор шаблонов электронной почты

С его помощью можно достаточно легко создать профессиональные и отзывчивые электронные письма. Что самое приятное — нет необходимости знать что-либо про то, как устроен HTML

Стоимость: #бесплатно (но есть платные тарифы)

#email #html #конструктор

Static forms — пожалуй, один из простейших способов интегрировать форму в ваши веб-сайты

При этом сама HTML-форма будет бесплатной и идеально подойдёт для статической страницы. А данные, которая она собрала, отправятся на ваш заранее зарегистрированный email-адрес

Стоимость: #бесплатно

#html #web #бесплатно

StackEdit — полнофункциональный бесплатный онлайн Markdown-редактор

В его основе лежит библиотека PageDown, которая, например, используется Stack Overflow и прочими порталами Stack Exchange

А ещё он имеет открытый исходный код

Стоимость: #бесплатно

#markdown #редактор #open_source

SpinKit — минималистичные загрузочные CSS-спиннеры

Они анимированы исключительно при помощи CSS

Пример того, как они выглядят, можно увидеть выше

Стоимость: #бесплатно

#css #анимации #web