Web Development Tools

Стоки

Freepik, Icons8, Stockio, Stocksnap, Unsplash, Pexels, Mixkit, Coverr

Иконки

IcoMoon, IconFinder, Flaticon, Material icons by Google, Boxicons, CSS.gg, Phosphor, Remix, Bootstrap, VK Icons

Цвет

• Coolors - gradient, palette, contrast, generator
• Huemint - generator

• Color Hunt - palette
• Material colors - scheme
• Gradienta - gradient

• Data Color Palette - palette, generator

• Vivid Gradient - gradient

• TinEye Color extraction - создания цветовой палитры на основе изображения, которое вы ему «скормите»

• Easing Gradients - позволяет создавать нелинейные градиенты и использовать модифицированные цветовые пространства

• Happy Hues - палитра, 17 решений
• Tema by yoksel - подбор цвета, например для разных состояний кнопки (hover, active...)
• RgbTo - конвертер цвета в различные цветовые модели

Шрифты

• Google Fonts - download, import
• Fontstorage - download
• Font Squirrel - download

• Font Size Conversion - преобразование размера шрифта px pt em rem %
• Responsive Font Calculator by webSemantics - масштабирование шрифта по ширине области просмотра
• Таблица символов Юникода - от алфавитов до наборов с эмоджи
• ABCDinamo - шрифты от студии

Как получить наименьший размер шрифтовых файлов

Front-end

Learn JS, Дока, Can I use, regex101, CSS-Tricks

Читать

• Eloquent JS - книга
• 2ality - блог

Инструменты

• Create App - инструментом генерации базового кода приложения с конфигурациями сборки и списком зависимостей. Поддерживает Webpack, Parcel и Snowpack
• NTH - старт-пак
• DataTables - накатить быстро табличку
• Favicon generator
• URL-encoder для SVG
• Image to data-URI converter
• Warp SVG - деформация svg картинки
• Smooth Shadow - генератор теней
• CSS clip-path maker - обрезка картинок по заданному трафарету
• Haikei - генератор svg фигур и фонов
• Easings - генератор анимации cubic-bezier
• Web2Zip - скачать сайт
• FreeSSL - бесплатный сертификат для сайта

Шпаргалки

• Flex [клик] [клик] [клик]
• Media-запросы [клик]
• Emmet
• БЭМ [кратко] [полно]

Расширения для браузера

• ColorZilla - узнаём цвет элемента на странице
• Dark Reader - тёмная тема для каждого сайта
• Planet VPN
• Dimensions - позволяет измерять расстояние между любыми объектами на странице
• VisBug - визуализация работы devtools'a. можно работать со страницей, как и с артбордом, проверять содержимое и прототипировать взаимодействия
• Responsive Viewer - позволяет просматривать сайты сразу в нескольких разрешениях экранов на одной странице
• Fonts Ninja - позволяет легко находить, пробовать и скачивать различные шрифты
• Wappalyzer - предоставляет информацию о cms, js фреймворках, css библиотеках, инструментах аналитики которые используются на сайте
• IP Whois & Flags Chrome & Websites Rating - определяет ip сайта, информацию о домене, страну размещения, приблизительную посещаемость и прочее
• PerfectPixel
• Quick Javascript Switcher - быстро вкл/откл js во вкладке
• SVG Export - экспорт svg иконок со страницы
• User-Agent Switcher - позволяет изменять строку user-agent
• SponsorBlock для YouTube - пропустить спонсорские вставки
• Grepper - быстрые ответы с кодом в поиске гугла

Коллекции ресурсов:
Design Resources, Design Tools Club, Front-end tools, Product Hunt

Работа с почтой:

• MX Toolbox - проверяем MX записи домена
• Mail Tester - проверка email на спам
• Temp Mail - временный email

Разное: Wayback Machine