Не завжди у програміста є під рукою спеціальне програмне забезпечення, через яке він і працює з кодом. Якщо так сталося, що редагувати код потрібно, а відповідного софта немає під рукою, можна скористатися безкоштовними онлайн-сервісами. Далі ми розповімо про двох таких сайтах і детально розберемо принцип роботи в них.
Редагуємо програмний код онлайн
Оскільки подібних редакторів існує велика кількість і їх все просто не розглянути, ми вирішили сконцентрувати увагу лише на двох інтернет-ресурсах, які є найпопулярнішими і представляють основний набір необхідних інструментів.Вище нами були розглянуті базові функції онлайн-сервісу CodePen. Як бачите, він непогано підходить для того, щоб не тільки редагувати код, але і писати його з нуля, а потім ділитися з іншими користувачами. Єдиним недоліком сайту є обмеження в безкоштовній версії.
Спосіб 2: LiveWeave
Тепер хотілося б зупинитися на веб-ресурсі LiveWeave. У ньому присутні не тільки вбудований редактор коду, але і інші інструменти, про які ми і поговоримо нижче. Починається робота з сайтом так:
Перейти на сайт LiveWeave
- Перейдіть по посиланню вище, щоб потрапити на сторінку редактора. Тут відразу ж ви побачите чотири вікна. У першому відбувається написання коду в HTML5, у другому - JavaScript, в третьому - CSS, а в четвертому показується результат компіляції.
- Однією з особливостей даного сайту можна вважати спливаючі підказки при наборі тегів, вони дозволяють підвищити швидкість набору і уникнути помилок в написанні.
- За замовчуванням компіляція відбувається в live-режимі, тобто, обробляється відразу ж після внесення змін.
- Якщо ви хочете деактивувати цю функцію, вам потрібно перемістити повзунок навпроти необхідного пункту.
- Поруч є включення і виключення нічного режиму.
- Ви можете перейти до роботи з контролерами CSS, натиснувши на відповідну кнопку на панелі зліва.
- У меню, редагується напис шляхом переміщення повзунків і зміни певних значень.
- Далі рекомендуємо звернути увагу на визначник квітів.
- Вам надають велику палітру, де можна вибрати будь-який відтінок, а вгорі відобразиться його код, який пізніше використовується при написанні програм з інтерфейсом.
- Прокрутіть в меню «Vector Editor».
- У ньому здійснюється робота з графічними об'єктами, що також іноді буде корисно під час розробки софта.
- Відкрийте контекстне меню «Tools». Тут доступна завантаження шаблону, збереження HTML-файлу і генератор тексту.
- Скачується проект у вигляді одного файлу.
- Якщо ви хочете зберегти роботу, попередньо доведеться пройти процедуру реєстрації в даному онлайн-сервісі.
Тепер ви знаєте, як редагується код на сайті LiveWeave. Ми можемо сміливо рекомендувати використовувати цей інтернет-ресурс, оскільки на ньому присутня безліч функцій і інструментів, що дозволяють оптимізувати і спростити процес роботи з програмним кодом.
На цьому наша стаття завершується. Сьогодні ми представили вам дві докладні інструкції по роботі з кодом за допомогою онлайн-сервісів. Сподіваємося, ця інформація була корисною і допомогла визначитися з вибором найбільш підходящого веб-ресурсу для роботи.
Читайте також:
Вибираємо середу програмування
Програми для створення Андроїд-додатків
Вибираємо програму для створення гри