Як для початківців, які хочуть вчитися, так і для досвідчених професіоналів, є кілька веб-сайтів, які дозволяють спробувати рядки коду та побачити результат у попередньому перегляді та майже в реальному часі. Це реальні програми з екраном, розділеним на два, де з одного боку ви пишете код, який може бути HTML, CSS, PHP, Javascript чи іншим, а з іншого боку, після натискання клавіші для виконання, ви фактично бачите, як це виглядає, якби цей код знаходився на веб-сайті.
Це не прості редактори коду, але місця, де ви можете перевірити своє програмування, не переживаючи про помилки, і швидко дізнатися, де є помилки. Codepen і JSFiddle - два найпопулярніші сайти в цій категорії, але є також багато альтернатив.
ЧИТАТИ ТАКОЖ: Основні мови програмування, які використовуються для додатків та веб-сайтів
1) CodePen
CodePen - найпопулярніший сайт і використовується програмістами, оскільки він безкоштовний, інтуїтивно зрозумілий і простий у використанні. Ставши стандартом у світі програмістів, просто пошукайте в Google, щоб знайти сторінки, вже складені Codepen, і відразу перевірте, чи це саме ви шукали. Гнучкі вікна перегляду та негайне виконання написаного коду роблять його досить досконалим для спробу анімації JavaScript та CSS, крім того, він може легко підключатися до зовнішніх скриптів (React, Vue та будь-чого іншого, доступного через CDN).
CodePen заслуговує на перше місце в цій категорії, проте деякі функції оплачуються, наприклад, спільне кодування та перегляди на повній сторінці (часткові перегляди в реальному часі безкоштовні).
2) JSFiddle
На другому місці (хоча це хронологічно один із найдавніших) у світі сайтів для написання та спробування програмного коду - JSFiddle, орієнтований насамперед на створення та тестування JavaScript. Його також можна використовувати для HTML та CSS, оскільки він підтримує поради щодо завершення коду, а також може бути кращим для CodePen для менш досвідчених.
Важливим моментом на користь JSFiddle є те, що він пропонує безкоштовний режим співпраці (включаючи голосовий та текстовий чат), тому ви можете працювати над кодом одночасно з іншими людьми.
3) глюк
Багато кодових сайтів дозволяють кодувати HTML / CSS / JS та генерувати статичні веб-сторінки, в той час як Glitch пропонує невеликий вільний простір для збереження проектів і робить його досить легким запуск коду на сервері Node.js. Ви можете спільно програмувати на Glitch,
Він також постачається з низкою інших фантастичних особливостей: спільне кодування, контроль версій, багато навчальних ресурсів, хороша інтеграція з GitHub, просте вбудовування, спільнота запитувати поради, вже створені проекти, які ви можете вільно змінювати або використовувати, і Інтеграція Visual Studio. Це чудовий, швидкий і простий спосіб запустити веб-додаток (або навчитися це робити).
4) CodeSandbox
CodeSandbox схожий на Glitch, але трохи складніший та повноцінний. CodeSandbox має більш гнучкий і настроюваний інтерфейс, дозволяє поширювати повноцінні веб-додатки, має місце для збереження файлів і виконує більшу частину основної роботи, залишаючи програмісту лише завдання написання.
5) Repl.it
Repl.it - середовище розробки для тестування різних типів мов програмування, таких як Python з підтримкою фронтового та зворотного коду, дозволяє розповсюджувати сайти та додатки, має інтеграцію з GitHub та інтуїтивно зрозумілий інтерфейс. Для тих, хто просто намагається створити веб-сторінки, це може бути занадто складно, але для досвідчених програмістів це ресурс, який слід врахувати. якщо ви плануєте лише фронт-енд або ви новачок у коді, але якщо плануєте все регулярно, варто вивчити його.
6) Liveweave - це веб-редактор, дуже схожий на JSFiddle, за допомогою якого можна писати та тестувати код для використання на веб-сайтах, з функцією попереднього перегляду в реальному часі, підказками коду для HTML5, CSS3, JavaScript та jQuery і дозволяє завантажувати проект у вигляді файлу застібка-блискавка. Ви також можете легко додавати зовнішні бібліотеки, такі як jQuery, AndgularJS, Bootstrap.
7) CodeSandbox - це вільний інтернет-простір, де ви можете запускати проекти веб-додатків, використовуючи різні рамки, такі як React, Vue, Angular та багато іншого.
8) StackBlitz - відмінний редактор програм JavaScript, який підтримує різні рамки, такі як Vue та React.
9) Flems, мінімалістичний сайт, ідеально підходить для швидких тестів.
10) JSBin, більш мінімалістична версія JSFiddle, написати код веб-сторінки і подивитися, як це виглядає.
11) CSSDeck - це простий сайт для тестування деяких основних ідей HTML / CSS та JS.
12) ICECoder - ще одне онлайн-середовище для тестування коду, яке вимагає завантажити програму, яка працює в браузері і яку також можна використовувати в автономному режимі.
13) Plunker - інтерфейсний інструмент, який дозволяє писати код, файли та веб-сторінки та зберігати їх на Github.
14) Scrimba - це інноваційне поєднання редактора відео та коду, яке є ідеальним навчальним середовищем для студентів та тих, хто хоче вчитися.
15) WebMaker, автор веб-додатків з функцією офлайн та інтеграцією з CodePen.
16) Дабблте, щоб спробувати написати HTML / CSS / JS-код із приємною графікою та автоматичним коректором для CSS-коду.
17) PlayCode - це також середовище для тестування основного коду HTML / CSS / JS в реальному часі.
19) JSItor - це ще одна альтернатива Codepen та JSFiddle, де ви можете писати код, комбінуючи HTML, CSS та Javascript і одразу побачити результат.
ЧИТАТИ ТАКОЖ: Сайти, щоб вивчити програмування, граючи з інтерактивними курсами та завданнями
Це не прості редактори коду, але місця, де ви можете перевірити своє програмування, не переживаючи про помилки, і швидко дізнатися, де є помилки. Codepen і JSFiddle - два найпопулярніші сайти в цій категорії, але є також багато альтернатив.
ЧИТАТИ ТАКОЖ: Основні мови програмування, які використовуються для додатків та веб-сайтів
Сайти для тестування онлайн-коду
1) CodePen
CodePen - найпопулярніший сайт і використовується програмістами, оскільки він безкоштовний, інтуїтивно зрозумілий і простий у використанні. Ставши стандартом у світі програмістів, просто пошукайте в Google, щоб знайти сторінки, вже складені Codepen, і відразу перевірте, чи це саме ви шукали. Гнучкі вікна перегляду та негайне виконання написаного коду роблять його досить досконалим для спробу анімації JavaScript та CSS, крім того, він може легко підключатися до зовнішніх скриптів (React, Vue та будь-чого іншого, доступного через CDN).
CodePen заслуговує на перше місце в цій категорії, проте деякі функції оплачуються, наприклад, спільне кодування та перегляди на повній сторінці (часткові перегляди в реальному часі безкоштовні).
2) JSFiddle
На другому місці (хоча це хронологічно один із найдавніших) у світі сайтів для написання та спробування програмного коду - JSFiddle, орієнтований насамперед на створення та тестування JavaScript. Його також можна використовувати для HTML та CSS, оскільки він підтримує поради щодо завершення коду, а також може бути кращим для CodePen для менш досвідчених.
Важливим моментом на користь JSFiddle є те, що він пропонує безкоштовний режим співпраці (включаючи голосовий та текстовий чат), тому ви можете працювати над кодом одночасно з іншими людьми.
3) глюк
Багато кодових сайтів дозволяють кодувати HTML / CSS / JS та генерувати статичні веб-сторінки, в той час як Glitch пропонує невеликий вільний простір для збереження проектів і робить його досить легким запуск коду на сервері Node.js. Ви можете спільно програмувати на Glitch,
Він також постачається з низкою інших фантастичних особливостей: спільне кодування, контроль версій, багато навчальних ресурсів, хороша інтеграція з GitHub, просте вбудовування, спільнота запитувати поради, вже створені проекти, які ви можете вільно змінювати або використовувати, і Інтеграція Visual Studio. Це чудовий, швидкий і простий спосіб запустити веб-додаток (або навчитися це робити).
4) CodeSandbox
CodeSandbox схожий на Glitch, але трохи складніший та повноцінний. CodeSandbox має більш гнучкий і настроюваний інтерфейс, дозволяє поширювати повноцінні веб-додатки, має місце для збереження файлів і виконує більшу частину основної роботи, залишаючи програмісту лише завдання написання.
5) Repl.it
Repl.it - середовище розробки для тестування різних типів мов програмування, таких як Python з підтримкою фронтового та зворотного коду, дозволяє розповсюджувати сайти та додатки, має інтеграцію з GitHub та інтуїтивно зрозумілий інтерфейс. Для тих, хто просто намагається створити веб-сторінки, це може бути занадто складно, але для досвідчених програмістів це ресурс, який слід врахувати. якщо ви плануєте лише фронт-енд або ви новачок у коді, але якщо плануєте все регулярно, варто вивчити його.
6) Liveweave - це веб-редактор, дуже схожий на JSFiddle, за допомогою якого можна писати та тестувати код для використання на веб-сайтах, з функцією попереднього перегляду в реальному часі, підказками коду для HTML5, CSS3, JavaScript та jQuery і дозволяє завантажувати проект у вигляді файлу застібка-блискавка. Ви також можете легко додавати зовнішні бібліотеки, такі як jQuery, AndgularJS, Bootstrap.
7) CodeSandbox - це вільний інтернет-простір, де ви можете запускати проекти веб-додатків, використовуючи різні рамки, такі як React, Vue, Angular та багато іншого.
8) StackBlitz - відмінний редактор програм JavaScript, який підтримує різні рамки, такі як Vue та React.
9) Flems, мінімалістичний сайт, ідеально підходить для швидких тестів.
10) JSBin, більш мінімалістична версія JSFiddle, написати код веб-сторінки і подивитися, як це виглядає.
11) CSSDeck - це простий сайт для тестування деяких основних ідей HTML / CSS та JS.
12) ICECoder - ще одне онлайн-середовище для тестування коду, яке вимагає завантажити програму, яка працює в браузері і яку також можна використовувати в автономному режимі.
13) Plunker - інтерфейсний інструмент, який дозволяє писати код, файли та веб-сторінки та зберігати їх на Github.
14) Scrimba - це інноваційне поєднання редактора відео та коду, яке є ідеальним навчальним середовищем для студентів та тих, хто хоче вчитися.
15) WebMaker, автор веб-додатків з функцією офлайн та інтеграцією з CodePen.
16) Дабблте, щоб спробувати написати HTML / CSS / JS-код із приємною графікою та автоматичним коректором для CSS-коду.
17) PlayCode - це також середовище для тестування основного коду HTML / CSS / JS в реальному часі.
19) JSItor - це ще одна альтернатива Codepen та JSFiddle, де ви можете писати код, комбінуючи HTML, CSS та Javascript і одразу побачити результат.
ЧИТАТИ ТАКОЖ: Сайти, щоб вивчити програмування, граючи з інтерактивними курсами та завданнями
