UPD: Заголовок был изменен с «IDE – зло. Давайте использовать Notepad» на более адекватный.
Иногда кажется, что разработчики некоторых крупных интернет-проектов до сих пор пишут код в Блокноте и думают, что все остальные должны поступать также. Шутка, конечно, но почему в большинстве популярных CMS до сих пор отсутствуют удобные инструменты для редактирования кода, я понять не могу. Как ни стараюсь.
Если вам иногда не хватает подсветки синтаксиса при редактировании кода в браузере — добро пожаловать под кат.
Источник проблемы
История началась в то давнее время, когда мне пришлось сделать пару сайтов на Joomla 1.5. Уже тогда я не мог понять, почему в стандартном редакторе статей на базе TinyMCE отсутствовала подсветка синтаксиса при просмотре исходного кода. В WordPress я столкнулся с той же проблемой. «Хорошо, что мешает вам поставить сторонний плагин, заменяющий стандартный редактор на более мощный и жить спокойно?» — спросите вы. Да, в чем-то вы правы. К примеру, для того же WordPress’а есть более десятка подобных плагинов. Для Joomla и, я думаю, других CMS тоже хватает. Конечно, об их преимуществах и недостатках можно еще долго спорить, но позвольте, неужели в продуктах, которыми пользуются сотни тысяч людей ежедневно, нельзя сделать эту простую функциональность доступной из коробки?
Хорошо, предположим, вопрос с популярными CMS’ками мы закрыли. Скорее всего, путем перебора удастся найти более-менее подходящий плагин, который можно будет использовать во всех будущих проектах. Но тут начинается самое интересное. Если вы работали с мощными темами для WordPress’а, взятыми, к примеру, с ThemeForest, то сразу же поймете о чем я. Как правило, большинство из них предоставляет возможность кастомизации путем добавления пользовательского HTML/CSS/JavaScript кода в разные части сайта. К примеру, вот так:
И если HTML/JavaScript код, как правило, пишется один раз, то CSS частенько приходится редактировать. И что вы прикажете делать в таком случае? Использовать любимую IDE и постоянно переключаться в браузер и обратно чтобы внести необходимые изменения? Можно конечно. Но, согласитесь, это как-то не очень удобно. А еще есть плагины для того же самого WordPress’а, в которых так же можно писать код. И подсветку синтаксиса поддерживают из них лишь единицы. Готов поспорить, что кроме этого найдется еще куча случаев, когда кому-то зачем-то надо отредактировать кусок кода прямо в браузере.
Мое решение
На этой стадии я понял, что хочу, чтобы у меня была возможность удобно работать с кодом в вебе. В любой CMS, в любой теме или плагине. Везде.
Вот примерно так и родилась идея проекта CodeHighlight — расширения для Google Chrome, которое позволяет превращать любое текстовое поле в мини-IDE с подсветкой синтаксиса и проверкой исходного кода на ошибки. За основу была взята JavaScript библиотека Ace, которая умеет делать все необходимое. Осталось написать само расширение, которое смогло бы встраивать Ace в любой редактор текста.
Что получилось
Через пару дней я показал первую версию расширения своим знакомым. Они посоветовали добавить возможность выбора темы для редактора, а также подсказали еще один интересный кейс — подсветку исходников в текстовом документе. Им приходилось периодически просматривать код с raw.github.com. С этой задачей сложности также не возникло. Правда, для работы была взята другая библиотека — highlight.js.
Для начала было решено не делать интеграцию с TinyMCE и другими WYSIWYG редакторами. Однако, по просьбам малочисленных, но активных пользователей, в последнюю версию все-таки была добавлена интеграция с TinyMCE. Кстати, из сообщений пользователей стало понятно, что далеко не все пользуются сторонними плагинами для редактирования постов в Joomla и других CMS.
Будущее проекта
Итак, что мы имеем на сегодняшний день. Есть расширение с огромной аудиторией в 80 человек (да, навыки по раскрутке собственных проектов, как и у большинства программистов, у меня на высоте). Есть подозрение, что кому-то кроме меня оно может быть полезно. Я думаю, у других людей могут быть другие похожие кейсы, которые хорошо было бы решать с помощью подобного расширения.
Пока еще есть энтузиазм развивать проект дальше. Даже не смотря на то, что коммерческой выгоды в нем я пока не вижу. Просто не хочется зарывать в землю инструмент, который может кому-то хотя бы немного облегчить жизнь.
Что скажете?
Комментарии (42)
claygod
21.03.2017 13:59+22devunion, заголовок «IDE – зло. Давайте использовать Notepad» получился желтоват… Вы не находите? Может всё же дадите более соответствующее статье название? Идея-то неплохая с плагином, не сейчас, но раньше, я бы вполне воспользовался таким для правок на своих сайтах.
Navij
21.03.2017 17:12Абсолютно согласен, заходил в ожидании обсуждения преимуществ и изъянов IDE, а увидел плагин с хайлайтом. Мне кажется, что тут подобные SEO-шные трюки не к месту.
devunion
23.03.2017 19:07claygod М… Да, теперь вижу, что перестарался с креативом :-). Надеюсь, стало получше. А что мешает им воспользоваться сейчас? Нашлись другие инструменты или отпала необходимость?
claygod
23.03.2017 19:43Да, креатив, он такой… как соль, «недосол на столе а пересол на хребте» ))
Плюсанул репу, т.к. вижу адекватную реакцию на критику и не хочу, чтобы у Вас из-за этого опустились руки.
По поводу инструмента — отпала необходимость, и когда он пригодился бы, в тот момент мне даже в голову не пришло бы искать подобный плагин — времена меняются, и мы меняемся вместе с ними.devunion
23.03.2017 20:13Да, в этом основная проблема плагинов. Их редко рассматривают в контексте решаемой задачи.
maxru
21.03.2017 14:03+8Скажу, что из вашей статьи можно сделать вывод, что IDE — это подсветка кода.
vconst
21.03.2017 14:44+7То же самое впечатление возникло. Раскрашивать текст можно научить много разных редакторов, онлайновых и обычных. А вот определил я переменную в JS, IDE мне ее не просто подсвечивает, но по умолчанию ее имя сразу становится серым, потому что она пока нигде не используется. И таких мелочей много, которые отличают редактор с подсветкой синтаксиса, от полноценной среды разработки.
Поправить пару строчек можно и в vi-nano, а проект собирать в текстовом редакторе — странное решение.
shizo
21.03.2017 14:25+1но почему в большинстве популярных CMS
Joomla & WordPress
Хорошо, предположим, вопрос с популярными CMS’ками мы закрыли.
Не, ну это не дело.
nebaz
21.03.2017 14:38Вы забыли потестировать Ваш сайт на маленьком разрешении экрана/на мобильниках.
Придётся править код, и тут пригодится расширение)
prostofilya
21.03.2017 15:30КДПВ вообще странная. Вы против тёмных тем и подсветки? // и вообще очень походит на сублайм =)
Psychosynthesis
21.03.2017 20:07А я в Notepad++ пишу и мне норм.
rst256
23.03.2017 19:30+1А я в AkelPad, после него на IDE даже смотреть противно. Подсветка синтаксиса там прекрасная, плюс есть поддержка встроенных скриптов WSH. Cохранить и залить отредактированный исходник на сервер, а после переключится на браузер и обновить в нем страницу можно легко сделать в один клик написав соответствующий скрипт. А css удобнее править в firebug на моззиле, для сохранения изменений нужно поставить расширение cssUpload.
sumanai
23.03.2017 20:43А я в AkelPad
Наконец-то нашёлся собрат! А то я молчал, думая, что один такой на Хабре, и все используют более известный Notepad++.
lazexe
21.03.2017 20:33+1Мне кажется название статьи должно быть: «Вкладываться в deadline'ы — зло. Давайте заваливать сроки!»
olegkrasnov
22.03.2017 22:34Вот ещё альтернативы: vim-anywhere, pterosaur, text-editor-anywhere, wasavi, quickcursor, edit-anywhere, keyboard-maestro-quickcursorkm.
novrm
23.03.2017 19:19Чем codemiror не подошел?
devunion
23.03.2017 19:27По-моему они практически идентичны. Когда будет время — займусь детальным сравнением. Почему Ace? Наверное, подкупил тренд из этой статьи: http://techslides.com/codemirror-versus-ace-editor. Возможно, в будущем появится соответствующая настройка для выбора предпочитаемого редактора.
olegkrasnov
23.03.2017 21:30Кстати, в некоторых CMS по умолчанию встроен Codemirror. Например Netcat, OctoberCMS, Pinegrow.
devunion
23.03.2017 22:20Это радует. Но их доля очень не велика. Для остальных же приходится придумывать костыли.
antropophob
23.03.2017 19:21А в Я браузере есть способ завести?
devunion
23.03.2017 20:23Да, расширения из Chrome Web Store без проблем устанавливаются в Яндекс Браузер. Вот прямая ссылка: https://chrome.google.com/webstore/detail/codehighlight/gioojphhkmhanbjankdapnegcodlellc
antropophob
23.03.2017 20:26Само собой ставится, только не работает. Контекстное меню появляется, а вот при выборе языка ничего не происходит. В Хроме всё заводится на ура.
core01
23.03.2017 19:31Шутка, конечно, но почему в большинстве популярных CMS до сих пор отсутствует подсветка синтаксиса, я понять не могу. Как ни стараюсь.
Все изменения нужно держать в файлах, в этом минус всех вышеупомянутых CMS — они держат многое в базе и это усложняет процесс деплоя.
Разрабатывая под Wordpress вполне себе можно держать все под гитом и редактировать в IDE и пользоваться не только подсветкой синтаксиса.
Использовать любимую IDE и постоянно переключаться в браузер и обратно чтобы внести необходимые изменения? Можно конечно. Но, согласитесь, это как-то не очень удобно.
Уже есть куча всего — live reload или hot reload
devunion
23.03.2017 19:41Да, ваш подход вполне оправдан. Однако, одно дело, когда вы непосредственно работаете в IDE над проектом. Тут нужен весь комплекс доступных инструментов. Другое дело — когда надо добавить тривиальные изменения — поиграться со со шрифтами, отступами и т.д. Не коммитить же каждое изменение в репозиторий. В общем, расширение — это инструмент, который должен использоваться вместе с IDE, а не вместо.
Writerim
Рассказали, что теплое не мягкое. При чем тут IDE? Плагин? Пишите про плагин.
lookid
Фатальный недостаток же