May 12

Список полезных ресурсов

Полезные ресурсы для Frontend-разработчика

  • Онлайн-конвертер видео в 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
  • 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 на русском

Библиотеки ориентированные на доступность

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
  • Measure That – еще один сайт для тестирования производительности js

Тестирование

Email

  • Can I email
  • Can I Use in HTML Emails
  • Mail Tester – проверить письмо на вероятность попасть в спам
  • Send Htmail – можно вставить верстку и разослать на любую почту чтобы протестировать письмо
  • Relay Firefox - Получать письма через сервис Firefox Relay чтобы узнать откуда приходят спам письма

Шрифты

  • 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 – коллекция готовых градиентов

Мой телеграмм канал | Источник