HTML керує сучасним світом. Правда, якщо ви запитаєте, що потрібно для того, щоб стати веб-розробником, вам розкажуть все про JavaScript, фреймворки, Python і т.д. Однак саме HTML скріплює це все єдине ціле.
Нема інтернету без HTML, і вам потрібно знати, як його редагувати, якщо хочете створювати сайти. Але редагування в Sublime Text або Visual Studio Code може бути надто складним, якщо ви не працюєте над великим проектом. Для простих проектів є найкращі сервіси, про які ми зараз і поговоримо.
Codepen
Codepen — це зручний онлайн-редактор із можливістю спільного редагування. Він складається з панелі для HTML, CSS, JavaScript, а також вікна попереднього перегляду в режимі реального часу. Розміри панелей можна регулювати, розтягуючи краї. Якщо вам потрібно протестувати верстку або JS-код, це відмінний варіант. Також тут можна переглянути роботи інших верстальників.
Декілька скриптів можна згрупувати в колекцію, але для цього потрібно буде сплатити тарифний план Pro, який коштує 9 доларів на місяць. Після цього ви додатково отримаєте місце для зберігання файлів, різні теми оформлення, можливість спільної роботи над кодом у режимі реального часу та доступ до повнофункціонального інтегрованого середовища розробки CodePen.
JSFiddle
JSFiddle схожий на «пісочницю», в якій ви можете грати з кодом JavaScript. Бачачи, як JS взаємодіє з HTML і CSS, ви можете редагувати їх прямо на сервісі і спостерігати за результатами змін.
Плюсом цього сервісу є те, що ви можете додавати External Requests у бічній панелі, що дозволяє підключати зовнішні JS та CSS файли. Функція Collaborate дозволяє працювати над одним проектом із кимось ще в режимі реального часу.
Єдиним недоліком сервісу є те, що оновлення панелі попереднього перегляду необхідно натиснути кнопку Run. Але це можна виправити, якщо зайти в налаштування та активувати Auto-run Code.
JSBin
JSBin - Простіша альтернатива JSFiddle. У ній ви можете редагувати HTML, CSS та JavaScript, просто перемикаючись між вкладками на одній сторінці, а також перемикати панелі попереднього перегляду та консолі для максимальної гнучкості.
Якщо JSFiddle дозволяє зв'язати зовнішні ресурси CSS та JavaScript, JSBin має тільки вбудовані бібліотеки, які можна використовувати. Вибір досить великий: від jQuery до React та Angular.
Сервіс є безкоштовним і не вимагає реєстрації, але вам знадобиться платний тарифний план, якщо ви захочете отримати вставки користувача, хостинг ресурсів, синхронізацію Dropbox і публічний URL для вашого коду.
Liveweave
Liveweave схожий на попередній редактор, але має приємніший інтерфейс (хоча наші переваги можуть відрізнятися). Як і JSFiddle, Liveweave дозволяє працювати в режимі реального часу та підключатися до певних сторонніх бібліотек, таких як jQuery.
Але він має кілька унікальних функцій. Наприклад, генератор Lorem Ipsum для створення тексту-риби на поточній позиції курсору. CSS Explorer надає візуальний редактор WYSIWYG для створення стилів. Color Explorer допоможе підібрати ідеальні кольори. А за допомогою Vector Editor можна створити векторну графіку для веб-сайту.
HTMLhouse
HTMLhouse — хороший варіант, якщо вам потрібний лише HTML, без CSS чи JavaScript. Він зрозумілий та мінімалістичний. Сервіс розділений по вертикалі, з лівого боку знаходиться панель редагування, з правого – прев'ю у режимі реального часу.
Однією з примітних функцій є можливість публікації HTML-файлу для спільного використання за вказаною URL-адресою.
HTMLG
Ще один варіант - HTMLG. Він працює за тією ж схемою – панель з кодом та попередній перегляд HTML. Однак у цьому сервісі не можна підключити CSS та JavaScript до HTML, створивши єдиний проект. Якщо потрібно редагувати код, написаний цими мовами, потрібно буде відкрити нову вкладку та редагувати його як окремий проект.
Зверніть увагу, що є обмеження в 300 слів, якщо ви тестуєте веб-сторінки з текстом. Щоб збільшити кількість знаків, а також використовувати версію без реклами, потрібно придбати передплату. Вартість платної версії починається з $5,80 на місяць.
Навіщо їх використати?
Плюс таких сервісів полягає в тому, що вони запускаються безпосередньо в браузері, який є найкращим та найбільш підходящим інструментом для верстки та рендерингу HTML-коду.
Коли ви пишете веб-розмітку в текстовому редакторі, наприклад Notepad++, необхідно зберегти зміни у файлі, потім завантажити файл у браузер, потім переглянути його, а потім повернутися до редактора для внесення додаткових змін. Це нудний та нераціональний процес!
Майже всі послуги з огляду можуть динамічно оновлюватися при зміні коду. Немає потреби перемикатися між вікнами. Ви налаштовуєте HTML, а зміни вносяться автоматично. Незалежно від того, на якому комп'ютері ви працюєте, можна отримати доступ до документа, якщо у вас є підключення до Інтернету.
