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

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

1. Animista

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

Animista

2. Ray

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

Например: 

Пример оформления кода в Ray

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

3. BGjar

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

BGjar

4. Neumorphism

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

• цвет;
• тип выпуклости;
• размытие;
• направление света;
Курс English For IT: Communication від Enlgish4IT.
Почни легко працювати та спілкуватися з мультикультурними командами та міжнародними клієнтами. Отримайте знижку 10% за промокодом ITCENG.
Інформація про курс
• изменение угла.

Neumorphism

5. CSS Button Generator

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

CSS Button Generator

6. DevSamples

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

DevSamples

7. ReadMe

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

ReadMe

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

8. Coolors

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

Coolors

9. Remove Background From Image

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

RemoveBG

10. Poet.so

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

Poet.so

11. Meta Tags

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

Meta Tags

12. Browser Frame

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

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

До

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

После

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

13. DevDocs

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

DevDocs

14. Undesign

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

Undesign

15. The Frontend Checklist

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

The Frontend Checklist

16. Unscreen

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

Unscreen

17. CSS Generator Tool

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

CSS Generator Tool

18. Logo Ipsum

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

Logo Ipsum