30 полезных сервисов для веб-разработчиков и дизайнеров v2

в 12:03, , рубрики: css, deisgn, html, JS, веб-дизайн, Веб-разработка, дизайн, сервисы

Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!

30 полезных сервисов для веб разработчиков и дизайнеров v2

1. Learn Angular — бесплатные интерактивные уроки по AngularJS.
30 полезных сервисов для веб разработчиков и дизайнеров v2

2. Siteliner — инструмент для seo-анализа сайта. Поиск дублирующегося контента, неработающих ссылок и многое другое.
30 полезных сервисов для веб разработчиков и дизайнеров v2

3. HTML Template Generator — больше подойдет для ленивых разработчиков, еще не использующих никакого boilerplate. Сервис позволяет сгенерировать базовую HTML-разметку документа: добавить нужные мета-теги, скрипты, либо целые бандлы, например, Twitter Bootstrap.
30 полезных сервисов для веб разработчиков и дизайнеров v2

4. Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe Photoshop / Adobe Lightroom, Autodesk 3dsMax / Autodesk Maya, Blender и, с недавних пор, Sublime Text 2.
30 полезных сервисов для веб разработчиков и дизайнеров v2

5. Bounce.JS — одновременно и сервис, и JS-библиотека для быстрого создания и редактирования CSS3-анимаций.
30 полезных сервисов для веб разработчиков и дизайнеров v2

6. CSS Shrink — онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.
30 полезных сервисов для веб разработчиков и дизайнеров v2

7. JS Nice — деобфускация и базовое документирование JS-скрипта. Вставляете непонятный код, сервис его анализирует и приводит в нормальный вид — добавляет отступы, пытается назвать переменные осмысленно в зависимости от контекста, добавляет комментарии с указанием переменных и их типов и т.д.
30 полезных сервисов для веб разработчиков и дизайнеров v2

8. Web Designers Checklist — чек-лист по подготовке проекта к сдаче для веб-дизайнера. Затрагивает многие аспекты, такие как именование файлов и слоев в макете, подготовка типографики, структура файлов и так далее.
30 полезных сервисов для веб разработчиков и дизайнеров v2

9. HTML Hint — похож на JS Hint. Проверяет разметку на соответствие заданным параметрам.
30 полезных сервисов для веб разработчиков и дизайнеров v2

10. Lollytin — визуальный конструктор лэйаута страницы. Использует Bootstrap 3.
30 полезных сервисов для веб разработчиков и дизайнеров v2

11. CSS Colours — красиво оформленный список CSS-цветов, которые могут быть использованы в виде слова, например color: blue.
30 полезных сервисов для веб разработчиков и дизайнеров v2

12. Social Good Ipsum — сервис для генерации текста-рыбы.
30 полезных сервисов для веб разработчиков и дизайнеров v2

13. Badge Service — генерация svg-значков в стиле github.
30 полезных сервисов для веб разработчиков и дизайнеров v2

14. CSS Triggers — подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное.
30 полезных сервисов для веб разработчиков и дизайнеров v2

15. Blockspring — создание своих API, не требующих хранения данных в БД, а также коллекция уже созданных другими юзерами API.
30 полезных сервисов для веб разработчиков и дизайнеров v2

16. Qwecode — кодирование / декодирование строк в различные форматы: BASE64, Binary, Unicode numbers и другие.
30 полезных сервисов для веб разработчиков и дизайнеров v2

17. Loremflickr — это как placehold.it, но с котиками :)
30 полезных сервисов для веб разработчиков и дизайнеров v2

18. CSS Shortand generator — собирает специфические свойства типа background-color в одно общее свойство.
30 полезных сервисов для веб разработчиков и дизайнеров v2

19. PX to EM — удобный конвертер из PX в EM и обратно.
30 полезных сервисов для веб разработчиков и дизайнеров v2

20. Frame — набор готовых мокапов для демонстрации дизайна / верстки / etc. Выбираете мокап, загружаете изображение, получаете на выходе готовую картинку с вашей работой.
30 полезных сервисов для веб разработчиков и дизайнеров v2

21. CodeFights — задачки на знание языка JavaScript.
30 полезных сервисов для веб разработчиков и дизайнеров v2

22. Cheetyr — шпаргалки по Photoshop, Illustrator, CSS, Git и Vim.
30 полезных сервисов для веб разработчиков и дизайнеров v2

23. SnazzyMaps — различные цветовые схемы для Google Maps.
30 полезных сервисов для веб разработчиков и дизайнеров v2

24. Plain Pattern — создание паттернов из SVG-изображений.
30 полезных сервисов для веб разработчиков и дизайнеров v2

25. Sass to Scss — конвертер из Sass в Scss.
30 полезных сервисов для веб разработчиков и дизайнеров v2

26. Gitter — удобный чат, имеющий хорошую интеграцию с github'ом.
30 полезных сервисов для веб разработчиков и дизайнеров v2

27. Fibonacci — визуальный конструктор flexbox-лэйаута.
30 полезных сервисов для веб разработчиков и дизайнеров v2

28. Project Parfait — инструмент для быстрой нарезки .psd-макета, и вообще для ускорения верстки в целом. Позволяет узнавать расстояние между слоями, размер разных слоев и многое другое.
30 полезных сервисов для веб разработчиков и дизайнеров v2

29. The Code Player — онлайн-уроки по HTML / CSS / JS в формате живого кодинга. Можно записывать свои уроки.
30 полезных сервисов для веб разработчиков и дизайнеров v2

30. Типограф Муравьева — доступен также и в качестве PHP / Python библиотеки. Позволяет правильно оформить текст.

Автор: Scorpion97

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js