Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Computer Skills
  2. Monodraw

Использование Monodraw для комментирования кода

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Будучи программистом фрилансером, мне часто приходится исправлять чей-то код или портировать тему с одной платформы на другую. Это приводит к тому, что чтобы понять что-то, мне приходится пролистывать много строк некомментированного кода.

В этом уроке, я покажу вам, как я быстро нахожу нужные строки кода и документирую их так, чтобы знать где и что. Я буду использовать приложение Monodraw для создания ASCII-графики.

ASCII означает Американская стандартная кодировочная таблица для печатных символов.

Чтобы понять почему я это делаю, вы должны знать что большиство современных редакторов кода имеют функцию называемую мини-карта (minimap). Это сжатый обзор вашего кода по правую сторону редактор.

Minimap in Sublime Text Atom and Brackets
Мини-карта в Sublime Text, Atom и Brackets

Есть три наиболее распространённых редактора с мини-картой. Sublime Text 3 имеет встроенную мини-карту, а в Atom и Bracketshave для этого имеются плагины.

На мини карте вы можете с лёгкостью увидеть структуру кода, но не можете его прочесть. Чтобы видеть более детально, вы можете использовать ASCII-графику.

Создание ASCII-графики

В ASCII-графике используются обычные ASCII символы для создания изображения. Некоторые используют символ решетки, для обрисовки слов.

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

Monodraw Application
Приложение Monodraw

Вот где кодеру можеть пригодиться Monodraw. Подумайте о Monodraw как о Adobe Illustrator для ASCII-графики. Оно не только облегчает создание ASCII графики, но и даёт больше вариантов и способов добавления иллюстрации к вашему коду.

При открытии Monodraw, появляется пустая рабочая область, разделённая на квадраты. Каждый квадрат это область для ASCII символа. Что позволяет вам с лёгкостью нарисовать желаемую ASCII графику. Monodraw может автоматизировать всё это.

В левой части перечислены объекты в рабочей области с возможностью перемещения порядка их отображения вверх и вниз. У каждого объекта есть название по умолчанию, но вы можете изменить его на что-то более подходящее. Это правая сторона называется инспектор. Используйте инспектор для проверки параметров объектов и внесения корректировок.

Creating the Header Tag

Нажав значок Text на панели инструментов, вы можете создать текстовую область. Появится диалоговое окно, в котором вы напишите нужный текст. Выберите тип обработки в инспекторе с правой стороны.

Я выбрал стиль со шрифтом Banner. В Monodraw есть 149 различных стилей шрифтов. Если вы захотите изменить текст, дважды нажмите на текстовую область, чтобы открыть окно.

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

Isometric Header Tag with Border
Изометрический тег заголовка с границей

Шрифт Epic отлично смотрится на мини-карте. Я использую рамку, чтобы оно более выделялось в коде. Для экспорта ASCII графики в ваш редактор, выберите в меню File - Export.

Export Dialog
Диалог экспорта

Есть варианты экспорта как ASCII текст, PNG, or SVG. Для варианта с ASCII текстом есть опция копирования в буфер обмена в левом нижнем углу. В основном я так и экспортирую. А затем вставляю в исходный код.

Параметр стиля комментария (comment style) заключит ASCII графику в теги комментирования для используемого вами языка. В этом уроке я буду использовать стиль комментариев XML/HTML.

Замечание: если в редакторе кода ASCII-графика выглядит не правильно, тема редактора либо не использует моноширинный шрифт, либо включает перенос слов, либо в теме редактора комментарии сделаны курсивом. Вам нужно будет настроить параметры темы и переноса слов. Для лучшего сочетания, откройте настройки с помощью Command-, (Command запятая).

Preferences
Настройки

В диалоге настроек, настройте шрифт на тот, который используется в вашем редакторе.  Так как я использую Menlo Regular 14 в Sublime Text, в настройках я указывают тот же шрифт и размер.

Комментирование кода

Я управляю несколькими сайтами, которые изначально были созданы WordPress, но я потихоньку переношу их на Craft CMS. Так как они хотят сохранить их темы оформления, мне приходится пересоздавать эти темы.

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

Как только я получаю основной исходный файл, я использую Sublime Text для его форматирования с помощью пакета HTML-CSS-JS Prettify. Как только код будет красиво отформатирован, я могу легко пометить разделы.

HTML with Section Names
HTML с названиями разделов

Создание каждого заголовка и размещение его в коде занимает несколько секунд. Если бы я делал это вручную, это бы заняло часы.

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

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

Документация структуры

Так как Monodraw помогает делать формы, вы можете использовать его для описания макета сайта. Используйте инструмент Box, для создания каждой области и озаглавьте их используя Text Box без указания стиля шрифта.

Site Layout Documentation
Описание макета сайта

При создании элемента, вы видите каждый элемент слева сторона экрана.  Вы можете нажать на несколько объектов, как это сделал я для боковой колонки и текста, и использовать инструмент выравнивания в инспекторе справа для акцентирования текста. 

Site Layout Documentation Exported to Sublime Text
Обрисовка макета сайта, экспортированная в Sublime Text

Экспортируйте это и поместите в редакторе, для наглядного представления о макете этой страницы.

Simple Flowchart Example
Пример простой блок-схемы

Вы можете использовать это даже для создания блок-схем, которые вы можете добавить в код JavaScript

Я создал это из трёх прямоугольников, одного ромба, трёх линий и текста. При выборе инструмента «линия» и выборе существующего объекта, появятся синие точки, к которым вы можете присоединить линию. Представьте как бы вы делали это вручную.

Если вы хотите имитировать изображение, используйте инструмент изображения, выберите изображение с вашего компьютера и начертите его с помощью инструмента «перо» и выберите различные ASCII символы для отрисовки.

Требуется больше художественных способностей, чтобы сделать это правильно, но другие имитируют изображения iPhone и многого другого.

Новые функции

Я написал этот урок для версии 1.0.1.  Работа идёт и они уже почти готовы выпустить 1.1. 

Одной из отличных новых особенностей являются сниппеты — Snippets, ими можно будет делиться с другими. Сейчас у меня есть файл с отрывками ASCII графики, из которого я копирую и вставляю в другие документы. 

Наличие Snippets гораздо бы упростило это.

Другие ресурсы

В загрузках есть файл, содержащий документы Monodraw с ASCII графикой, использованной в этом уроке.  Если вы хотите узнать больше о ASCII графике, можете посетить эти веб-сайты:

Вывод

Теперь, когда вы видели насколько просто добавить ASCII графику в ваш код, вы можете попробовать это сами. Это сэкономило мне много часов поиска правильного раздела кода.

Вы можете использовать программу minify для избавления от комментариев и сжатия кода. Я использовал пакет Minify для Sublime Text.  Не забудьте также сохранить свою версию.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.