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

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

1. Animista

Animista — это библиотека CSS-анимаций. Это место, где вы можете поиграть с коллекцией готовых CSS-анимаций, изменить их и скопировать код на свой сайт.

От редакции Techrocks. Также рекомендуем статью «Правильное использование анимации в UX».

2. Ray

На этом сайте можно превратить свой код в красивые картинки. Аналогичный функционал можно найти на сайте Carbon.

От редакции Techrocks. Есть и другие инструменты для оформления скриншотов. Почитать можно в статье «5 отличных инструментов для создания скриншотов кода».

3. BGjar

BGjar — бесплатный генератор фонов в формате SVG для сайтов, блогов и приложений.

4. Neumorphism

Neumorphism — это генератор CSS-кода. Там вы сможете подобрать цвета, градиенты, тени — и превратить их в код.

5. CSS Button Generator

Бесплатный онлайн-инструмент, помогающий создавать красивые стили для кнопок.

6. DevSamples

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

7. ReadMe

Самый простой способ создать файл README — использовать Readme.so. Этот простой редактор позволяет добавлять и кастомизировать все разделы, которые должны быть в README проекта.

Аналогичный сайт — Readme Gen.

8. Coolors

Этот сайт поможет вам с подбором цветов для дизайна сайта.

От редакции Techrocks. Также рекомендуем статью «4 инструмента для улучшения цветовой доступности сайта».

9. Remove Background From Image

На этом сайте вы за пять секунд удалите фон с изображения.

10. Poet.so

Здесь можно создавать красивые картинки для постов в Twitter.

Этот инструмент используется для отладки и генерации мета-тегов для сайта. Он позволяет редактировать контент и экспериментировать с ним, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и т. д.

12. Browser frame

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

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

После обработки:

Сайт с аналогичным функционалом — Screely.

13. DevDocs

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

14. Undesign

Undesign — коллекция бесплатных ресурсов для веб-разработчиков и дизайнеров. Здесь вы найдете сниппеты кода, цвета, градиенты, значки, анимации и т. д.