20 сайтов для повышения продуктивности веб разработки
![20 сайтов для повышения продуктивности веб разработки](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/485b2c00-106d-4a92-8c0e-c93707f16417.png)
В этой статье собрано несколько полезных приложений для повышения производительности, которые могут пригодиться вам в рабочем процессе разработчика.
Сюда входит все, что вам может понадобиться, от работы с изображениями, анимацией и шрифтами до создания контента для социальных сетей. Каждый инструмент будет включать прямую ссылку, описание, а также превьюшку изображения.
1. Lorem Picsum
это генератор плейсхолдеров для изображений с множеством параметров настройки. Вы можете указать параметры для ваших изображений непосредственно в URL-адресах.
![Lorem Picsum](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/e6455b4a-11eb-4f54-a8d3-555fa115d913.png)
2. Remove.bg
Удаляет фон с любой фотографии автоматически. Просто выберите свое изображение и получите картинку без фона.
![Lorem Picsum](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/1a3e10a1-01e7-4e3e-abb4-dddcacebf960.png)
3. PFPmaker
PFPMaker создает профессиональные фотографии профиля из любой вашей фотки. Он использует ИИ для удаления фона, украшает вашу фотографию и автоматически генерирует десятки вариантов изображения профиля.
![PFPmaker](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/694c2044-1b1d-4a6e-ac49-adb487ca9794.png)
4. Compressor.io
Один из самых эффективных компрессоров изображений с современным UI:
![Compressor.io](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/39eac803-8b5a-4bb9-aa61-92e9d5d0efd4.png)
Так же как альтернативу рекомендую tinypng
5. CSSGradient
CSS Gradient упрощает создание веб-градиентов. Включает набор инструментов, которые помогут вам повысить скилы работы с градиентами
![CSSGradient](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/daed2103-47b9-4ec3-9dc1-9bb0b9bcce7f.png)
6. Neumorphism.io
Сайт который поможет вам работать с тенями. Как альтернативный ресурс можно использовать Box-shadow.
![Neumorphism.io](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/77955957-68ae-4a3e-9217-3b0cf75acf70.png)
7. Animista
Инструмент для создания css анимаций с различными эффектами
![Animista](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/4b5e6dcc-5220-4c2c-80b8-5cf3fa1d3fef.png)
8. FontJoy
Fontjoy находит интересные сочетания шрифтов, используя нейросеть.
![FontJoy](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/92768fde-6140-412a-a766-51c11650a589.png)
9. Logo Ipsum
Сервис можно юзать когда вам нужен placeholder logo. В сервисе есть разные логотипы, вы можете выбрать цвет и стиль.
![Logo Ipsum](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/0897e79c-ee05-4cf8-9cb6-8c9fde157a07.png)
10. Carbon
Портал, который позволяет создавать красиво стилизированые картинки с вашим кодом, так же как альтернативный ресурс ray.so.
![Carbon](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/26e72ed4-dd93-4a18-b850-f199e88fe2c4.png)
11. Poet.so
Похожий ресурс на Carbon, только для твиттер и linkedin постов
![Poet.so](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/4b5677f2-e44f-4d48-942e-11e7cc84c93b.png)
12. BrowserFrame
Этот сайт позволяет делать скриншоты в фрейме браузеров, например хром, мозила, сафари и других. Вы можете кастомизировать цвет и отступы, это позволит вам делать красивые картинки ваших изображений. Так же как альтернативный ресурс можно использовать Screely.
![BrowserFrame](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/8a47e71f-7a0f-4d94-bf6d-bed64bc1eaaf.png)
13. Framer
Инструмент, позволяющий создавать кастомизированые прототипы. Веб разработчикам он будет полезен для создания приложений, веб-сайтов, дизайн систем. Что отличает его от чего-то вроде Figma? Идея Framer в том, что вы можете работать с проектами, которые реально реализовать с помощью кода. Это мостик между дизайнерами и разработчиками, позволяющий взаимодействовать и быстро экспериментировать в общем рабочем пространстве. Есть бесплатная версия до 3х проектов и 2х юзеров.
![Framer](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/ea383632-3399-4b73-9387-1ad6d7961898.png)
14. Readme.so
Редактор позволяет быстро добавлять и настраивать все разделы, необходимые для README файла вашего проекта.
![Readme.so](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/c7787146-697a-4af7-89ad-6d1ac6de5a33.png)
15. Metatags.io
Инструмент для отладки и генерации метатегов для веб-сайта. Ресурс позволяет предворительно просмотреть то, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и тд.
![Metatags.io](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/e6f0f675-6293-41a4-8706-56d2c2c84af7.png)
16. Favicon.io
Создание favicon в несколько кликов из текста, изображения или эмодзи.
![Favicon.io](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/3fe464c2-76a8-4220-b1dc-079cdf2f3d69.png)
17. Unminify
Инструмент для деминификации (unpack, deobfuscate) кода JavaScript, CSS, HTML, XML и JSON, что делает его читабельным и красивым.
![Unminify](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/eedebd16-0748-4955-bccb-bebecbd9854f.png)
18. Postman
Многим уже знаком этот инструмент, для тех кому еще нет скажу, что это приложение (есть и веб версия) позволяет делать различные апи запросы, докумментировать их и даже писать апи тесты
![постман](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/e87eb4fc-10a1-4462-8410-bcf9fb1f4fd3.png)
19. Toby
Расширение для браузера. Основные функции сервиса — быстро закрывает множество окон и сохраняет их списком, который можно открыть одним нажатием. Это удобно, если вы используете определенные веб-инструменты для конкретной задачи, их можно быстро сохранить и открывать одной кнопкой.
![toby](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/928ee067-8861-4e04-9e3b-636f7f2ef733.png)
20. CodePen
Онлайн песочница, в которой можно работать с HTML, CSS и JavaScript. Инструмент будет полезен, когда вам нужно бысто потестить какой то код, или поработать совместно над чем-то быстро.
![](https://joprblob.azureedge.net/site/news/06782612-db77-4da7-94ea-a90d72bce206/496d9c8f-db2b-46d3-8dad-a57a34756f24.png)
Так же рекомендуем: Инструменты разработчика для повышения продуктивности