[Mac App Store] TypeMetal — продвинутый WYSIWYG-редактор HTML-кода

Как за всё время существования интернета разработчики ни старались сделать идеальный редактор HTML-кода, всегда было что-то не так. На свет уже появлялись и полностью визуальные редакторы, и приложения с поддержкой множества рабочих областей, и много чего ещё. TypeMetal предлагает пользователю свежий и довольно интересный способ написания кода, в котором сочетаются как элементы WYSIWYG-инструментов, так и обычный текстовый режим, без которого всё равно невозможно обойтись.

Создание странички в TypeMetal происходит практически так же, как и во многих других визуальных редакторах. Конечно, до совсем уж элементарного перетаскивания картинок и текста на чистый лист дело не доходит, код всё равно придётся набирать руками, но он становится сразу невидимым, а вместо тегов и параметров появляется контент.

Например, для вставки картинки вам достаточно будет начать набирать соответствующий тег и, выбрав его из списка автозаполнения, указать путь к нужному файлу на компьютере. После чего вы увидите всплывающее окошко с дополнительными свойствами изображения, где вы сможете настроить размеры, качество и дописать что-нибудь в атрибут “alt”.

Одним из главных отличий TypeMetal от множества других редакторов является небольшая панель в нижней части окна. При выборе любого элемента на странице, на этой панели появляется своеобразный путь, включающий все родительские теги и позволяющий производить некоторые изменения выбранной части сайта. Благодаря этой строке вы ещё и можете отслеживать принадлежность и зависимость одной части страницы от другой. А нажав на любую ячейку правой кнопкой мыши, вы увидите контекстное меню, из которого сможете поменять параметры выделенного участка или выделить конкретную его часть, чтобы не делать это при помощи курсора.

Следующей интересной задумкой стала Source Loupe. В этом режиме просмотра у вас на экране появляется динамическая плашка с кодом. Она показывает в виде HTML ту часть страницы, на которой в данный момент находится ваш курсор, и выделяет более яркими цветами конкретный отрывок исходника. Близлежащая к ней кнопка Show Blocks просто разделяет всю страницу на блоки, которые можно быстро перетасовывать мышкой.

Также в TypeMetal присутствуют сниппеты. Если вы часто используете одни и те же участки кода, вам не обязательно будет каждый раз писать их с самого начала или копировать из других приложений. Достаточно будет один раз внести их в базу TypeMetal и при помощи контекстного меню быстро вставлять любой из них. В этом же меню, кстати, собраны все наиболее часто использующиеся теги. И если вам будет лень набирать их с клавиатуры, можно будет воспользоваться этим набором.

Для тех, кто намерен плотно работать с таблицами стилей и часто их менять, у TypeMetal есть специальное решение. Вы можете подгружать новые CSS файлы и буквально в два клика менять их для одной и той же странички.

В настройках TypeMetal имеется раздел с описанием форматирования вашего HTML кода. Там вы сможете выбрать оптимальные варианты того, как будет выглядеть ваш исходник. Все доступные опции можно посмотреть на скриншоте ниже.

TypeMetal будет интересен в первую очередь тем, кто хочет найти хороший визуальный редактор HTML, но при этом уже преодолел уровень полного отсутствия кода перед глазами. Профессиональным верстальщикам, конечно, тоже можно взглянуть на это приложение, но вряд ли TypeMetal заменит более дорогие и продвинутые аналоги.

Если вы не хотите тратить столь значимую сумму (см. плашку ниже) вслепую, компания Coherence Lab даёт возможность скачать бесплатную триал-версию со своего сайта.