Инструменты для веб-дизайна

Сегодня я бы хотел поговорить об инструментарии веб-дизайнера, что туда входит, какие инструменты присутствуют в Сети, как их использовать, и по возможности при этом сэкономить. Итак, во вкусностях представлен редактор кода Atom. В свое время я перепробывал множество редакторов, как стандарта WYSIWYG (What you see is what you get) наподобии Adobe® Dreamweaver™, так и "чистых" редакторов наподобии Sublime Text®. Чем меня привлек Atom – во-первых, он бесплатен, поддерживает множество синтаксисов, а кроме того расширяем из собственного репозитория. Чуть больше об этой чудесной программе.

Как видно из скриншота, Atom представляет из себя полноценный IDE (Interactive Development Environment – интерактивная среда разработки). Сразу же оговорюсь, что на скриншоте Atom уже со множеством дополнений и сктном в стиле Material Design (уж простите мне такую мою слабость :)). Итак, слева – дерево каталогов удаленного сервера(!). Да, благодаря дополнению Remote-FTP Atom может соединяться с удаленным сервером по протоколу FTP, (настройки читай в описании). Следом идет локальное дерево каталогов. Сверху справа – открытый документ, внизу – открытое окно терминала, начальная папка у которого – папка с проектом. Да, в качестве среды можно использовать папку с файлами, что особенно удобно при работе с сайтами, которые никогда не состоят из одного HTML-файла, а практически всегда есть папки со шрифтами, скриптами, картинками и стилями. Терминал позволяет быстро управлять локальным сервером непосредственно из Atom и запускать для конкретного проекта. В качестве виртуального сервера я использовал live-server (доступен via npm), базирующийся на Python -m SimpleHTTPServer. И наконец справа – так называемый MiniMap, представляющий из себя графическое представления листинга кода, попутно служащий в качестве полосы прокрутки. Из него великолепно видно в какой части кода находится пользователь.

Немного о дополнениях, которые не видно вооруженным глазом)). Дело в том, что масса дополнений, как, к примеру, sequential-numbers представляют собой дополнительные функции доступные либо через командную палитру (Cmd+Shift+P), либо через меню Packages. Итак, собственно, плагины, которые могу порекомендовать:

Emmet	Бывший Zen-Coding, очень сильно упрощает жизнь за счет продвинутой системы выражений
Sequential-numbers	Секвенционная вставка чисел по схеме 1+1, 1+2 и т.д.
Atom beautify	«Красивое» форматирование кода
Print code	По умолчанию большинство редакторов кода не умеют печатать этот самый код. Print-code исправляет это недоразумение
Minify	Сокращает код, форматируя его в одну строку, убирая все переносы. По сути антоним Beautify, но для ускорения работы помогает.
Wrap in tag	Заключает выбранную строку в html-тег

Это далеко не полный перечень интересных и полезных дополнений для Atom – ищите, пробуйте, делитесь)).