Mail.ru выпустила бесплатный онлайн-редактор для программирования на python, c++, java и php

Description #

Online Encoders and Decoders consists of several tools that allow you to
encode or decode data using various methods. Our implementation supports
both the text string input and the file input. If the data you want to
encode or decode are in the form of a short string we recommend using the
text string input. On the other hand for larger input data we recommend you
to use a file as an input. On the output you are given the result in the
form of a text or a hex dump, depending on the contents of the output, as
well as in the form of a file that you can download. In case of large
outputs the plain text output or the hex dump output may be truncated. The
file output is always complete.

A brief description of available tools follows:

• Base64 Encoder is a tool that helps you convert binary data
  to ASCII string format that uses 64 printable ASCII characters.
  The Base64 encoding is typically used for transfering email messages because email formats does not support binary data.
• URL Encoder encodes unsafe characters so that the
  output can be used as a valid part of a URL. Unsafe characters are in most cases replaced with hexadecimal codes
  ().

• IDN Encoder converts Internationalised
  Domain Names (IDNs) to Punycode representation which consists of
  ASCII characters and the prefix . The
  conversion of an IDN domain to Punycode is necessary in order for the Domain
  Name System (DNS) to understand and manage the names. For example,
  is converted to
  .

• Uuencoder is a tool that converts to
  and from
  uuencoding.
  The uuencoding is a binary to ASCII encoding that comes from Unix
  where it was used for transmitting of binary files on the top of text-based protocols.
• Code page Encoder converts text data from one encoding to another one.
  Note that source code page for text inputs is always UTF-8. If you want to use another source code page, please use file input.
• XML Encoder encodes all characters with
  their corresponding XML entities if such entity exists. For example,
  ,
  and
  are
  converted to ,
  and
  , correspondingly
• Bin-Hex Encoder is a tool that is similar to Base64 Encoder. The difference between tools is that
  Bin-Hex Encoder employs Base16 encoding (a string of hexadecimal digits) instead of Base64.

GitHub

Наверное, нет разработчика, который бы не слышал о GitHub, но как автоматический ревьюер кода он известен гораздо меньше. Здесь у него есть две версии — бесплатная, с ограничением по количеству пользователей, и платная, от $7 в месяц.

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

Основные функции:

• Сравнение фрагментов кода лоб в лоб.
• Просмотр истории отдельных фрагментов кода без просмотра всего документа — так называемый blame view.
• Создание white-листов по отдельным веткам. 

Gradual подход к перераспределению сложности

Gradual подход к написанию читаемого кода по больше части вращается вокруг цифры 5. 

Есть несколько способов перераспределения сложности:

• Gradual decomposition;

  Если в нашем коде собралось больше пяти элементов, мы пробуем  распределить их декомпозицией по файлам, по модулям, по классам, по функциям: в зависимости от того, что у нас есть в языке программирования.

• Gradual meta information;

  Если мы понимаем, что у нас уже есть распределение на множество частей, начинаем добавлять метаинформацию: давать описательные имена идентификаторам, чтобы они отвечали на вопросы «что это?» и «зачем это?». 

• Gradual typing.

  Наконец, когда сложность продолжает скапливаться, мы добавляем типы, как «капканы» на будущее. Чтобы по возвращению к этому коду через какое-то время, «капканы» сработали и защитили нас.

Gradual подход работы со сложностью можно сформулировать в одном предложении: если количество новых вещей в коде намного превышает цифру 5, нужно использовать один из способов перераспределения сложности из списка выше.

Вопрос о том, что такое «новая вещь», остается немного за кадром. Это зависит от бэкграунда разработчика: сколько лет он пишет код, какие языки программирования, фреймворки, подходы знает. 

Если в команде есть разработчики разного уровня (например джуниоры и сеньоры), они не смогут писать код, который будет читаем друг для друга. То, что не является новинкой для сеньора, который 20 лет пишет код, для джуниора ею будет. Поэтому код, который напишет сеньор, будет очень простой, понятный, хорошо читаемый — но для сеньоров. А для джуниоров количество «нового» и, соответственно, сложности в таком коде будет зашкаливать. 

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

Писать читаемый код сложно. И Gradual поход, о котором шла речь в статье, не всегда применим. Разработка софта очень разная: есть разработка микроконтроллеров, есть разработка игр, есть бизнес-автоматизация по спецификациям, и там правила игры совершенно другие.

Но в большинстве случаев Gradual подход, который крутится вокруг цифры 5, является неплохой стартовой точкой.

Интуитивное мышление, когнитивные искажения

Наш мозг, конечно, не «чистый лист» с рождения, но и не компьютер с предустановленным софтом. Считается, что мы можем думать ровно те мысли и тем способом, которому обучились за свою жизнь. Интуитивное мышление неплохо справляется на бытовом уровне при оценке диапазонов: оценить насколько красива картина, насколько хорошо сделан ремонт, насколько талантливо выступает артист.

Но если мы попробуем применить интуитивное мышление к чужому коду, наш мозг автоматически выдает результат: «Этот код плохой, ведь его писал не ты. Перепиши все».

У нас нет интуитивного способа оценить «качество кода». Программирование — это принципиально новая область, и наш мозг не может интуитивно применить к нему жизненный опыт из реального мира.

Кроме того, программистам, в отличие от художников, трудно обучаться у мастеров. Мы, конечно, можем прийти в наш аналог картинной галереи — GitHub — и посмотреть там на большие проекты. Но если сделать чекаут проекта с GitHub, там может оказаться полмиллиона строк кода. Это очень много, а у нас нет оптического зума, чтобы просто окинуть код взглядом, не вникая. Поэтому обучаться на примере программистам очень тяжело. Про то, что GitHub это скорее склад строительного материала, а не картинная галерея, я даже говорить не буду.

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

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

Visual Studio Code

Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.

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

Расширения для редактора

VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт и в поле ввода ввести интересующий плагин. После этого его можно установить.

Установка расширений в VS code.

Посмотреть список популярных плагинов можно через интерфейс редактора, либо на официальном сайте. Рассмотрим ряд полезных плагинов, которые могут помочь при разработке. Условно их можно разделить на несколько типов.

Добавляющие функциональность:

• Для удобной работы с системой контроля версий Git можно добавить плагины Git History и GitLens.
• Project Manager — добавляет редактору возможность работать с несколькими проектами.
• Settings Sync — синхронизирует настройки и установленные плагины между программами на разных компьютерах.
• Beautify — форматирует текст по заданным настройкам и приводит его к единообразию.

Проверяющие синтаксис:

ESLint — проверяет JavaScript код по заданным параметрам.

Изменяющие внешний вид:

• Vscode-icons — заменяет стандартные иконки файлов.
• Посмотреть на кастомные темы для Vscode можно на официальном сайте.

F

filter	Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flex	Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basis	Задает начальную длину гибкого элемента
flex-direction	Указывает направление гибких элементов
flex-flow	Сокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-grow	Указывает, сколько будет расти номенклатура относительно остальных
flex-shrink	Указывает, как элемент будет сжиматься относительно остальных
flex-wrap	Указывает, следует ли обернуть гибкие элементы
float	Указывает, должно ли поле плавать
font	Задает все свойства шрифта в одном объявлении
@font-face	Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами
font-family	Задает семейство шрифтов для текста
font-feature-settings	Позволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-values	Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerning	Управляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-override	Управляет использованием глифов, специфичных для языка, в шрифте
font-size	Задает размер шрифта текста
font-size-adjust	Сохраняет читаемость текста, когда происходит откат шрифта
font-stretch	Выбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-style	Задает стиль шрифта для текста
font-synthesis	Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variant	Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternates	Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-caps	Управление использованием альтернативных глифов для заглавных букв
font-variant-east-asian	Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligatures	Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numeric	Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position	Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weight	Определяет вес шрифта

Редактируем программный код онлайн

Поскольку подобных редакторов существует большое количество и их все просто не рассмотреть, мы решили сконцентрировать внимание только на двух интернет-ресурсах, которые являются самыми популярными и представляют основной набор необходимых инструментов

Способ 1: CodePen

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

1. Откройте главную страницу сайта CodePen, воспользовавшись указанной выше ссылкой, и переходите к созданию нового профиля.

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

Заполните информацию о своей странице.

Теперь можно подняться вверх вкладки, развернуть всплывающее меню «Create» и выбрать пункт «Project».

В окне справа вы увидите поддерживаемые форматы файлов и языки программирования.

Начинайте редактирование, выбрав один из шаблонов или стандартную разметку HTML5.

Слева будут отображаться все созданные библиотеки и файлы.

Левый клик мыши по объекту активирует его в окне справа отображается код.

Внизу присутствуют кнопки, позволяющие добавить собственные папки и файлы.

После создания задайте имя объекту и сохраните изменения.

В любой момент вы можете перейти к настройкам проекта, щелкнув ЛКМ на «Settings».

Здесь выставляется основная информация – название, описание, теги, а также параметры предпросмотра и вдавливания кода.

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

Когда вы отредактируете нужные строки кода, щелкните на «Save All + Run», чтобы сохранить все изменения и запустить программу. Внизу отобразится скомпилированный результат.

Сохраните проект у себя на компьютере, кликнув на «Export».

Дождитесь завершения обработки и загрузите архив.

Поскольку в бесплатной версии CodePen пользователь не может иметь более одного активного проекта, его нужно будет удалить, если требуется создать новый. Для этого щелкните на «Delete».

Введите проверочное слово и подтвердите удаление.

Выше нами были рассмотрены базовые функции онлайн-сервиса CodePen. Как видите, он неплохо подходит для того, чтобы не только редактировать код, но и писать его с нуля, а потом делиться с другими пользователями. Единственным недостатком сайта являются ограничения в бесплатной версии.

Способ 2: LiveWeave

Теперь хотелось бы остановиться на веб-ресурсе LiveWeave. В нем присутствует не только встроенный редактор кода, но и другие инструменты, о которых мы и поговорим ниже. Начинается работа с сайтом так:

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

На этом наша статья завершается. Сегодня мы представили вам две подробные инструкции по работе с кодом с помощью онлайн-сервисов. Надеемся, эта информация была полезной и помогла определиться с выбором наиболее подходящего веб-ресурса для работы.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Типы редакторов

Есть два основных типа:

1. Текстовый. Классический вариант для тех, кто знаком с HTML-разметкой, знает теги, CSS-классы, умеет работать с контентом внутри страницы и понимает, как его оформлять. Эти навыки необходимы, так как в редакторе разработчик должен работать вручную, прописывая свойства с помощью текстовых параметров.
2. Визуальный. Решение для тех, кто не понимает, что представляет собой HTML и как оформлять страницы с помощью текста. Обычно содержит в себе блоки, напоминающие конструктор. Перемещая их, пользователь может «собрать» полноценный сайт, не написав и строчки кода.

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

Несколько фактов о проекте All Cups

All Cups – это международная онлайн-платформа для ИТ-специалистов, на которой проходят различные конференции и соревнования, а также предложены обучающие курсы, тесты и практические задачи для обучения и развития. Заявленная миссия проекта – объединить знания, опыт и формирование практических навыков в области информационных технологий в одном месте, сделав их доступными в любой точке мира.

Mail.ru Group проводит различные ИТ-чемпионаты с 2010 г. С 2020 г. деятельность по данному направлению ведется на базе единой платформе All Cups. По информации, опубликованной на странице проекта на Github, по состоянию на конец января 2021 г. на платформе было зарегистрировано более 200 тыс. пользователей из 130 стран.

Особенности сервиса

Сервис доступен на сайте платформы All Cups. Чтобы начать работу с кодом, нужно создать комнату. В случае необходимости подключить других людей можно просто поделиться с ними ссылкой на комнату. Для этого нужно нажать соответствующую кнопку в правом верхнем углу интерфейса, после чего ссылка на комнату будет скопирована в буфер обмена.

Действия участников процесса синхронизируются автоматически – пользователи видят, что делает каждый из них, в режиме реального времени, но результат выполнения программы у каждого свой. При возникновении у одного из пользователей проблем сетевого соединения с сервисом интерфейс редактора полностью блокируется – таким образом гарантируется наличие единой версии кода у всех участников разработки. Как только подключение восстанавливается, пользователь автоматически получает обновление с актуальной версией кода от остальных участников, и работа продолжается.

Готовый код можно запустить прямо в редакторе, чтобы проверить, корректно ли он работает, и, в случае необходимости, устранить ошибки, однако каких-либо инструментов отладки в интерфейсе редактора CNews не обнаружил.

Как пандемия изменила подходы к организации рабочего пространства
Бизнес

Стоит отметить невысокую скорость компиляции и исполнения программ, которую предлагает инструмент. Как убедился CNews, при сборке простейшей программы на языке C++, выводящей на экран фразу “Hello, world!”, от нажатия кнопки «Запустить» до появления результата проходит около 10 секунд. Для сравнения: сборка и выполнение такой программы на достаточно слабой локальной машине с помощью компилятора GNU C++ занимает менее половины секунды.

В тестовом окружении на реальном железе элементарная программа компилируется и выполняется более чем на порядок быстрее, чем в онлайн-редакторе на All Cups

Кроме того, согласно инструкции пользователя, которую можно вызвать, кликнув по вопросительному знаку в правом нижнем углу рабочего пространства редактора, максимальный размер кода программы ограничен 50 тыс. символов. «Если вы достигаете ограничения, то код не будет отправляться на сервер и синхронизироваться между участниками», – говорится в инструкции. Возможность работы с многофайловыми программами, судя по интерфейсу инструмента, на данном этапе развития сервиса не предусмотрена.

Phabricator

Это целый набор open-source инструментов от Phacility, облегчающих работу по оценке кода. Можно использовать облачную версию, а можно загрузить всё на свой сервер. Если использовать второй вариант — ограничений нет. В случае же облачной версии нужно будет платить от $20 за пользователя в месяц. Верхняя планка  — $1000 в месяц. Все платные предложения включают техническую поддержку, плюс 30-дневный пробный режим.

Основные функции:

• Поддержка Git, Mercurial и SVN
• Встроенные чаты, канбан-доски и другие инструменты
• API для создания скриптов, взаимодействующих с Phabricator через HTTP JSON API

Редактор исходного кода

Редактор HTML кода с подчеркнутым синтаксисом обладает множеством полезных функций, таких как:

• Счетчик номера строки
• Выделение активной строки
• Выделение открывающих и соответствующих закрывающих тегов
• Автоматическое закрытие тегов
• подробнее см. ниже …

Варианты очистки:

• Встроенные стили
  – Удалить каждый style атрибут тега. Рекомендуется использовать отдельный файл CSS для стилизации.
• class & id
  – Удаляет все атрибуты class и id . Функция полезна если вы переносите статью с одного сайта на другой и хотите избавиться от чужеродных классов.
• Пустые теги
  – Удаляет теги, которые не содержат ничего или содержат только пробел.
• Теги с одним пробелом
  – Удаляет теги, которые содержат один пробел, такие как
  <p>&nbsp;</p>
• Повторяющиеся пробелы
  – Удаляет повторяющиеся пробелы, вызванные плохой практикой смещения текста вправо и настройки пропусков в тексте:
  <p>&nbsp;&nbsp;&nbsp;</p>
• Удалить комментарии
  – Избавиться от HTML-комментариев:
  <!— … —>
• Атрибуты тега
  – Стирает все атрибуты тега, включая стили, классы и т. д. Этот параметр не влияет на src изображений и атрибут hrefссылок, поскольку что в противном случае эти теги станут бесполезными.
• В простой текст
  – Удаляет все теги, форматирование и оставляет простой текст.

Параметры редактора HTML

Откройте выпадающее ▼ меню, чтобы показать параметры очистки. Выбранные варианты выполняются после нажатия главной кнопки очистки HTML. Нажмите на красный значок треугольника на справа чтобы выполнить только один из них.

• Отменить
  – Восстановить документ в предыдущее состояние. Вернитесь на предыдущий этап, если вариант очистки не принес желаемого результата.
• Новая страница
  – Стереть весь документ, чтобы начать с чистого листа.
• Сжать
  – Табуляция и новые строки используются для того, чтобы сделать файл HTML более читабельным для человека, но не влияют на отображение в веб-браузере. Удалите эти ненужные знаки для минимизации размера файла и более быстрой загрузки страницы.
• Tree view
  – Задать отступ текста для выделения иерархии тегов. С этой опцией вы можете сделать сжатые документы вновь доступными для чтения.
• Кодировка символов
  – Решите, хотите ли вы кодировать специальные символы или нет. Например
  &nbsp;
• Демо-контент
  – Заполните приборную панель демо-контентом, который поможет вам экспериментировать с этим инструментом. Демо содержит заголовок, таблицу, изображения, пункты и другие элементы.
• Прокручивать редакторы вместе
  – По умолчанию два редактора прокручиваются вместе, если документ большой. Вы можете отключить эту функцию.
• Добавить тарабарский текст
  – Добавляет пункт»Lorem ipsum» в конец файла. Нажмите еще раз, чтобы добавить другой.

On-line генерация G-кода по растровому изображению

Интернет-сервис формирования G-кода из BMP, JPG, GIF, PNG

Мощность

 Диапазон мощности

—
 Минимум — Максимум

 Дискретные значения

Описание сервиса

Сервис предназначен для формирования G-кода для станка с ЧПУ. On-line генератор G-кода создает программу для управления ЧПУ с установленным лазерным модулем.
Это может быть твердотельный лазер или CO2-лазер.
С помощью полученной программы для ЧПУ можно гравировать на различных поверхностях:

• Дерево
• Фанера
• Стекло
• Металлы

Псевдотонирование

Для гравировки на стекле можно воспользоваться псевдотонированием. Реализован алгоритм упорядоченного псевдотонирования.
Псевдотонирование позволяет смоделировать эффект полутонов с помощью двух цветов: белый и черный.
На стекле из-за малой площадки текучести, низкой теплопроводности и оптических свойств невозможно полноценно сформировать полутона.
В сервисе On-line генерация G-кода по растровому изображению после псевдотонирования выполняется инвертирование цветов.
Если необходимо получить псевдотонированное изображении без инвертирования цветов, то нажмите кноку Псевдотонирование повторно.

Формирование G-кода, реализованные команды

On-line сервис формирует код, эквивалентный коду, экспортируемому из программы ECNC. Следует заметить, что в программе ECNC для управления ЧПУ нет ограничений на размер загружаемого изображения.
В сервисе ограничения связаны с выделенным временем выполнения скриптов на сервере.
На данный момент в on-line генераторе G-кода используются команды:

• X — перемещение вдоль оси X
• Y — перемещение вдоль оси Y
• M3 — включение лазера
• M5 — выключение лазера
• S — мощность лазера

Правила формирования кода

В блоке Размеры готового изображения определяется соответствие между растровым изображением и заготовкой, то есть количество пикселей на 1 миллиметр.
Все перемещения производятся на скорости холостого хода.
Если каретка движется слева-направо, то перед «темным» пикселем лазер включается на заданную мощность. Каретка проходит пиксель и лазер выключается. Аналогично при движении справа-налево.
Мощность лазера задается числом, следующим за S. Число является отображением степени «черноты» пикселя на отрезок, заданный в блоке Диапазон мощности.
То есть, для диапазона 20-80, 255 — белый пиксель — соответвует команде S20, 0 — черный пиксель — соответствует S80. Для указания мощности используются только целые числа.
Кроме того, если выставить галку Дискретные значения, то отрезок 0-255 будет разбит на одинаковые интервалы. При попадании яркости пикселя в какой-то интервал будет установлена соответвующая мощность.
Генератор формирует тело программы. Скорость перемещения, начальное и конечное положения задайте самостоятельно.

Rhodecode

Онлайн-инструмент, который поддерживает три версии систем контроля: Mercurial, Git и Subversion. Сервис не бесплатен. Цены начинаются с $8 в месяц за пользователя. Есть возможность заплатить сразу $75 за пользователя в год, что позволяет сэкономить пару десятков долларов. Если не хочется платить, можно загрузить community-edition, установив на своём сервере.

Основные функции:

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

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

А какими инструментами пользуетесь вы? Ждём комментариев, поделитесь с коллегами 🙂

JSBin

Простенький редактор кода HTML/JS/CSS. Можно тестировать код и смотреть на результат непосредственно на той же странице. Имеется возможность подключения своих скриптов, возможность выбора библиотек и фреймворков (причем разных версий). После сохранения результата можно легко поделится кодом. Перед использованием сервиса рекомендуем посмотреть помощи на которой отображено список клавиатурных сочетаний, т.к. это поможет вам в работе с сервисом. Сервис бесплатный, но есть возможность расширить возможности купив Pro аккаунт. После покупки платного аккаунта у вас появится возможность сохранять и синхронизировть код на Dropbox, при отладке кода использовать SSL, делать доступ к коду по паролю и использовать свои URL. Стоимость Pro аккаунта составляет 9$ в месяц. Покупка платного аккаунта не является обязательной и является лишь дополнением к простому аккаунту пользователя, который хочет расширить свои возможности.

Перейти на сайт —

Rendera

Бесплатный online-редактор, поддерживающий работу с HTML, CSS и JavaScript.

Для работы с редактором нет надобности в регистрации и приступать к написанию кода можно без промедлений.

Спартанский дизайн ресурса предусматривает написание кода в левой колонке, тогда как в правой можно наблюдать за результатами своей работы (после нажатия кнопки Render, выполняется преобразование кода в HTML-страницу), что довольно удобно, т. к. для просмотра результатов нет необходимости в переключении между вкладками.

Раздел «Examples» содержит примеры базовых HTML-конструкций кода поддерживаемых языков программирования.

ShiftEdit

Интегрированная среда разработки ShiftEdit является упрощенным аналогом Cloud9IdE, помимо функциональной разницы, также присутствует разница в цене — 6 долларов в месяц.

К основным возможностям среды ShiftEdit следует отнести возможность:

• редактирования кода HTML, CSS, JavaScript, PHP, Python, Perl, Ruby;

• редактирования документов в режиме online через FTP/SFTP, Dropbox, Google Drive;

• совместной работы над проектами;

• проверки синтаксиса на лету;

• подсветки активной строки, с которой происходит работа;

• работы в режиме WYSIWYG редактирования HTML-документов;

Редактор поддерживает:

• функции автозаполнения кода;

• SSH Key аутентификации;

• функции Drag and Drop для загрузки файлов.

https://youtube.com/watch?v=PuTOOrRYTZA