Лучшие друзья фронтендера: 18 ресурсов, которые должны быть в арсенале каждого веб-разработчика

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

1. Animista

Онлайн-генератор CSS-анимации для разных компонентов. Позволяет самостоятельно выбирать нужные эффекты и получить готовый код для внедрения на сайт. 

2. Ray

Сервис, с помощью которого можно быстро и красиво оформлять небольшие фрагменты кода. 

Например: 

Кроме Ray для оформления кода также часто используется ресурс под названием Carbon. 

3. BGjar

Бесплатный инструмент для создания качественных SVG-фонов для веб-сайтов, блогов и приложений. 

4. Neumorphism

Инструмент для генерации неоморфных теней и форм с готовым CSS-кодом. Подойдет как разработчику, так и дизайнеру. Позволяет настроить: 

• цвет;
• тип выпуклости;
• размытие;
• направление света;
• изменение угла.

5. CSS Button Generator

Бесплатный онлайн-инструмент для создания красивых CCS-кнопок. 

6. DevSamples

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

7. ReadMe

Самый простой способ создания файла README. Редактор позволяет добавлять и настраивать все разделы, необходимы для readme проекта. 

Аналогичный по функционалу сайт для генерации README-файлов — Readme Gen. 

8. Coolors

Веб-приложение для выбора подходящей цветовой палитры. После регистрации можно сохранять готовые палитры в таких форматах, как PDF, PNG, SCSS, SVG, или просто копировать ссылку и пересылать результат. 

9. Remove Background From Image

Инструмент на основе искусственного интеллекта для удаления фона с изображения за пять секунд. 

10. Poet.so

Бесплатный сервис, с помощью которого можно сделать красивую карточку из любого Twitter-поста. Подойдет, например, для оформления отзывов о компании или цитат. 

11. Meta Tags

Инструмент для отладки и создания метатегов для веб-сайтов. Позволяет редактировать и экспериментировать с содержимым, а затем с помощью функции предварительного просмотра оценить, как веб-страница будет выглядеть в Google, Twitter, Facebook и на других платформах. 

12. Browser Frame

Инструмент, который позволяет вставлять скриншоты в рамку браузера. Поддерживает множество операционных систем, браузеров и тем. 

Скриншот до обработки: 

Скриншот после обработки: 

Инструмент, похожий по функционалу на Browser Frame — Screely. 

13. DevDocs

Бесплатный инструмент с открытым исходным кодом, который содержит документацию практически по каждой технологии, используемой в веб-разработке. Любую из них можно скачать для чтения офлайн. 

14. Undesign

На ресурсе собрана коллекция из бесплатных сайтов для разработчиков и дизайнеров с фрагментами кода, цвета, градиенты, шаблонами, иконками, анимацией и многим другим. 

15. The Frontend Checklist

На сайте собраны лучшие практики создания фронтенда, на которые стоит опираться при построении сайтов. 

16. Unscreen

Бесплатный онлайн-инструмент для удаления фона из видео и GIF-файлов на основе нейросети. Он выделяет объект на переднем плане и стирает все, что находится позади них. После этого фон можно заменить однородным цветом, фотографией или видео. 

17. CSS Generator Tool

Генератор CSS-правил. Он поставляется с множеством полезных функций, таких как Box-shadow, text-shadow, border и так далее. 

18. Logo Ipsum

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