- Онлайн-конвертер видео в gif
- Screentogif – сервис для записи экрана в gif со следящим курсором (пример на хабре)
- Google Earth Studio – имитация аэросъемки, позволяет делать ролики, снятые будто в полете над Землей или даже из космоса
- Generated Photos – генератор аватарок пользователей
- SlidesGo – Бесплатные Google Слайды и PowerPoint шаблоны
- Shields – цветные бэйджики для GitHub
- Blobmixer – онлайн сервис для создания трехмерных объектов с заголовком. Можно выбирать из 16 объектов с разной формой, цветом и текстурой. Объекты можно настраивать и добавлять им разные эффекты
- GetMentor – найти ментора по любому направлению из крупных компаний
- Solvery – еще один сервис для поиска ментора
- Have I Been Pwned – проверка засветился ли пароль в списке скомпрометированных
- I love pdf – все для работы с пдф в одном месте
- SkippPro – подработка
- Chalk – красивые скриншоты кода
- Carbone - красивые скриншоты кода
- Show Code - красивые скриншоты кода
- Ray So - красивые скриншоты кода от Raycast
- BFE.dev – задачи на react, js, css и тд
- Реставратор старых фото от Mail.ru
Разработка
- Рефакторинг Гуру – запахи кода, рефакторинг, паттерны
- Typescrript Challenge – Typescrript Challenge
- Mock API – генерация апишки, полезно для тестовых или демок
- Learn git branching – изучение git в игре
- Flexbox Froggy – переместить лягушку на кувшинку с помощью flexbox
- Шпаргалка по markdown
- Real Favicon Generator – генератор фавиконок под разные устройства (по совету HTML Academy)
- Автопрефиксер онлайн – автоматичское добавление браузерных префиксов для css-свойств
- Перевод «JavaScript Style Guide» от Airbnb
- Overapi – сборник всех методов и свойств в Javascript
- Dirty Markup – сервис для форматирования HTML, CSS, JS или наоборот, минификации
- WHATWG – спецификация HTML
- Code Share – поделиться кодом быстро и без боли: скопировал вставил
- React-svgr – онлайн конвертация SVG в React компонент
- sbup audit – может оценить стоимость сайта (по SEO)
- Creativefrontend.io – вдохновение для креативного фронтендера Web GL, Three.js
- Уроки по three.js
- CSS Specificity - специфичность разных селекторов (https://cssspecificity.com старый)
- CSS Layout – паттерны популярных компонентов
- Patterns – Layout & Web Vitals patterns в блоге гугл
- Fa2Png – конвертация font awesome иконок в png. Например для верстки email
- File.io – сервис с API для загрузки файлов
- Font2Web – генерация шрифтов в разные форматы
- GuruWeba – удобный список html тэгов с описанием и примерами
- MDN – документация по HTML от Mozilla
- CSSmatic – генератор шумов для фона
- Can I Include – аналог Can I Use, только определяет можно ли вложить один тег html в другой
- Тренажер по emmet
- CSS Grid Generator – генератор сетки на гридах
- Create App – конструктор webpack и parcel конфигов
- HTML5 Periodical Table – все HTML тэги в периодической таблице
- Html Head – руководство по HTML-элементам в
<head> - CSS Lint
- Modernizr – сканирует браузер на поддержку тех или иных свойств
- IT волонтер – сайт для it помощи
- CMD5.ru – сервис для расшифровки хэшей
- Free SSL – бесплатные SSL сертификаты на 3 месяца
- Bountysource – заработок на вкладе в open-source
- ASCII flow – построить диаграмму для md файлов
- mermaid-js – как маркдаун для диаграмм и уже встроен в гитлаб
- Patterns – онлайн книга паттернов Javascript и React (от Addy Osmani)
- Strapi - Node.js Headless CMS
- Bench Hyoo – считает время рендера HTML элементов
- HTML Email Check
- Theb AI – бесплатный аналог Chat GPT на русском
Библиотеки ориентированные на доступность:
- Reach UI – от Ryan Florence
- React Spectrum – от Adobe
- Headless UI – от Tailwind
- Radix UI
- Aria Kit – из поста artalar
UI Kits и дизайн-системы:
- Ratio – от Рамблера
- Ant
- Base Web – от Uber (!использует styled-components)
- MUI – аналог material ui
- Consta – от Газпром нефти, хорошая документация
- Arui Feather – в архиве но был очень преочень красивый сайт с документацией (найти)
- Chakra UI – селекты не стилизованы
- Yandex UI
- Horizon UI – очень красивая, построена на чакре, для админок
- КОД – каталог отечественных компонентных дизайн-систем
- Nord – дизайн система Nordhealth
- Polaris – дизайн система Shopify
- Primer – от GitHub
- VK UI – от Вконтакте
- Grabity UI – от Яндекс, есть поддержка rtl
💫 Анимации
- Анимиста – простые CSS анимации наглядно
- Easings.net – набор готовых анимаций для CSS transition
- Cubic Bezier – поиграть с кривыми безье
🏃 Оптимизация
- Squoosh – мощный онлайн инструмент для сжатия и конвертации изображений. Умеет в альфа-канал с PNG-8 в отличие от PS
- SVGOMG – оптимизация SVG
- BundlePhobia – проверить и сравнить размер разных библотек
- JSBench Me – сайт для тестирования производительности js (в примере сравнение цепочки методов lodash, нативной и через цикл for источник: https://habr.com/ru/company/yandex/blog/570914/)
- Measure That – еще один сайт для тестирования производительности js (в примере сравнение bind и arrow function источник: https://habr.com/ru/company/yandex/blog/536682/comments/)
💣 Тестирование
- PageSpeedInsight
- Webmark.com – как выглядит сайт на разных устройствах
- Browserstack – тестирование сайта на разных разрешениях и ОС
- Web Page Test – по совету Никиты Дубко с Яндекс.Субботника тык
- RegExTester – тестирование регулярок
- 20 инструментов для тестирования сайта
- Credit Card Genereator
- Web Developer – расширение для Chrome: отключить CSS, JS, flex и пр.
- Responsive Viewer – расширение для Chrome: одновременный скрол всех разрешений адаптива, синхронизация кликов на всех разрешениях. Не забывать отключать после использования, а то блочит JS в магазине расширений Chrome.
- Расширение Web Developer – расширение для Chrome. Чтобы проверить как будет работать сайт без JS, CSS, отключить куки, работа с формами и многое другое. ТОПЧИК
- Расширение User-Agent Switcher – сменить User-Agent на любой другой
- Расширение CSS Feature Toggles – отключить/включить на сайте гриды, флексы, sticky и многое другое
- Good First Issue
- Goofi – еще один сервис для Good First Issue
- Website Carbon – сколько ваш сайт потребляет углерода
- Check AdBlock – сайт для тестирования блокировщиков рекламы
✉️ Email
- Can I email
- Can I Use in HTML Emails
- Mail Tester – проверить письмо на вероятность попасть в спам
- Send Htmail – можно вставить верстку и разослать на любую почту чтобы протестировать письмо
📜 Текст
- Главред – помогает чистить текст от словесного мусора, дает подсказки по замене слов без потери смысла
- Типограф Лебедева – приводит текст для сайта в соответствие с правилами экранной типографики
- Типограф Муравьева – еще один инструмент для приведения текста в соответствии с нормами экранной типографики
™️ Шрифты
- Pro Catalog – чумовые кириллические шрифты
- Font style matcher – подобрать letter-spacing для улучшения LCP
- Automatic font matching – автоматически подбирает самый похожий шрифт. Но настройкам size-adjust и ascent-override верить нельзя.
🌌 Иллюстрации и иконки
- Figma Community – бесплатные полезности для фигмы: ui компоненты, иллюстрации, плагины
- Openpeeps – конструктор иллюстраций
- Opendoodles – бесплатные иллюстрации от дизайнера из Мексики Пабло Стэнли (есть плагин Blush в Figma для быстрой вставки в проект)
- Конструктор иллюстраций от Icons8
- Ouch! – набор готовых иллюстраций от Icons8
- Use smash
- Pof Pof
- Growwwkit – бесплатно только коллекция Phonies
- Noun Project Icons
- FlatIcon
- Material Icons – самый большой набор иконок на любую тему в едином стиле
- Fontawesome – еще один большой набор иконок на любую тему
- Background Generator – генератор абстрактного бэкграунда
- Shape Divider – удобное создание волн и искривлений часто используемых на лэндингах с экспортом в SVG и CSS
- SUPA – конструктор коммерческих видео
- Fluent Files – файлы фигма в флюент дизайне, красивые fluent emoji
- Fffuel – коллекция всяких разных прикольных абстрактных картинок и генераторов
🎨 Цвет
- Coolors – генератор цветовых схем
- Mycolor.space – генератор градиентов по введенному цвету
- WebGradients – коллекция готовых градиентов
📚 Бесплатные программы обучения