Glitch, отличная платформа для разработчиков

Сбойотличная платформа для обучения программированию.

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

Вот пример проекта, который я сделал на Glitch сРеагироватьиReact Router:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

С Glitch вы можете легко создаватьдемонстрацииипрототипыприложений, написанных на JavaScript, от простых веб-страниц до продвинутых фреймворков, таких как React илиVueи серверные приложения Node.js.

Он построен поверхУзел, и у вас есть возможность установить любойnpmпакет, который вы хотите, запуститеwebpackи многое другое.

Его принесли вам люди, которые сделали несколько чрезвычайно успешных продуктов, в том числе Trello и Stack Overflow, так что у него есть много бонусов за это.

Почему я считаю, что Glitch - это здорово?

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

У вас есть доступ кжурналы, токонсольи множество других вещей.

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

Вы можете начать погружаться в кодне теряя временинастройка среды, контроль версий и фокус на идее с автоматическимHTTPSURL иCDNдля медиаресурсов.

Кроме того, нет никакой блокировки, это просто Node.js (или, если вы не используете серверный JavaScript, это просто HTML, JS и CSS)

Это бесплатно?

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

Есть разумные ограничения вроде

• У вас есть 128 МБ пространства, исключая пакеты npm, плюс 512 МБ для медиаресурсов.
• Вы можете обслуживать до 4000 запросов в час
• Приложения останавливаются, если к ним не обращаются в течение 5 минут, и они не получают никаких HTTP-запросов, а долго работающие приложения останавливаются через 12 часов. Как только приходит HTTP-запрос, они запускаются снова

Обзор Glitch

Это домашняя страница Glitch, на ней показаны несколько проектов, которые они решили продемонстрировать, потому что они классные, и несколько начальных проектов:

Создать учетную запись легко и бесплатно, просто нажмите «Войти» и выберите Facebook или GitHub в качестве «точек входа» (я рекомендую GitHub):

Вы будете перенаправлены на GitHub для авторизации:

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

ЩелкнувВаши проектыотправляет вас на страницу вашего профиля, в URL-адресе которой указано ваше имя. Мойhttps://glitch.com/@flaviocopes.

Вы можетештырьпроекты, чтобы их было легче находить, когда их у вас будет много.

Концепция ремикса

Когда вы только начинаете, конечно, у вас не будет собственных проектов.

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

Вы можете ремиксировать проект, который вам нравится, может быть, тот, который вы нашли в Твиттере или представили на домашней странице Glitch, или вы можете начать с проекта, который является шаблоном, чтобы что-то начать:

• Простая веб-страница
• Приложение Node.js Express
• Консоль Node.js
• Приложение Create-React-App
• Стартовое приложение Nuxt

В этих сборниках много других стартовых глюков:

• Привет, мир, глюки
• Строительные блоки

Если вы учитесь программировать прямо сейчас,Научитесь кодировать сборник сбоевэто очень мило.

Я создал несколько начальных приложений, которые постоянно использую для своих демонстраций и тестов, а именно:

• Простой HTML + CSS + JS глюк
• React + глюк стартера webpack

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

Ремикс глюк

Если у вас есть глюк, который вы хотите использовать, вы просто нажимаете на него, и появляется окно:

Есть 3 кнопки:

• Предварительный просмотрглюк - это код, который что-то делает. Это показывает результат сбоя.
• Редактировать проектпоказывает источник проекта, и вы можете приступить к его редактированию
• Ремикс этоклонирует глюк на новый

Каждый раз, когда вы делаете ремикс на глюк, создается новый проект со случайным именем.

Вот глюк сразу после его создания путем ремикса другого:

Глюк дал ему имяguttural-noodle. Щелкнув по названию, вы можете его изменить:

Вы также можете изменить описание.

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

Импорт / экспорт GitHub

Есть простой импорт / экспорт из / в GitHub, что очень удобно:

Держите свой проект в секрете

Щелчок по замку делает глюк приватным:

Создать новый проект

При нажатии «Новый проект» отображаются 3 варианта:

• узел-приложение
• узел-sqlite
• страница в Интернете

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

При любом сбое нажатие «Показать» откроет новую вкладку, на которой запущено приложение:

URL приложения

Обратите внимание на URL-адрес, это:

https://flavio-my-nice-project.glitch.me

Это отражает название приложения.

URL редактирования немного отличается:

https://glitch.com/edit/#!/flavio-my-nice-project

Предварительный просмотр выполняется на субдоменеglitch.me, а редактирование выполняется наglitch.com.

Заметили рыбок справа на странице? Это небольшой код JavaScript, который Glitch рекомендует добавить на страницу, чтобы другие люди могли сделать ремикс проекта или увидеть исходный код:

Запуск приложения

Каждый раз, когда вы вносите изменения в исходный код, приложение перестраивается, а просмотр в реальном времени обновляется.

Это настолько удобно, что внесение изменений в реальном времени дает немедленную обратную связь, что очень помогает при разработке.

Секреты

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

Если вы пригласите соавторов, они смогут видеть контент, поскольку они являются частью проекта.

Но любой, кто его ремиксирует, или люди, приглашенные вами для помощи, не увидят содержимое файла.

Управление файлами

Добавить новый файл в проект очень просто.

Вы можетеперетаскивайте файлы и папки с локального компьютера, или щелкните значок «Новый файл»Над списком файлов.

Также интуитивно понятно, как переименовывать, копировать или удалять файлы:

Лицензия в один клик и кодекс поведения

Наличие лицензии в коде - это одна из вещей, которую упускают из виду в примерах проектов, но она определяет, что другие могут или не могут делать с вашим проектом. Без лицензии проект не является открытым исходным кодом, и все права защищены, поэтому код не может быть распространен, и другие люди не могут ничего с ним сделать (примечание: это мое понимание и IANAL - я не юрист).

Глюк делает этосупер легкочтобы добавить лицензию, вНовый файлпанель:

Вы также можете легко изменить его:

Кодекс поведения - еще одна очень важная часть для любого проекта и сообщества. Это заставляет участников чувствовать себя желанными и защищенными при их участии в сообществе.

ВДобавить Кодекс поведенияКнопка добавляет образец кодекса поведения для проектов с открытым исходным кодом, с которых вы можете начать.

Добавление пакета npm

Щелкните значокpackage.jsonфайл, и если у вас его еще нет, создайте пустой.

Щелкните значокДобавить пакеткнопка, которая теперь появляется вверху, и вы можете добавить новый пакет.

Кроме того, если у вас есть пакет, который необходимо обновить, Glitch покажет количество пакетов, которым требуется обновление, и вы можете обновить их до последней версии простым щелчком:

Используйте собственную версию Node.js

Вы можете установить версию Node.js налюбой из этихв твоейpackage.json. С помощью.xбудет использовать последний выпуск основной версии, что является наиболее полезным, например:

{
  //...
  "engines": {
    "node": "8.x"
  }
}

Место хранения

Глюк имеет постоянную файловую систему. Файлы хранятся на диске, даже если ваше приложение остановлено или вы не используете его долгое время.

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

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

Встраивание сбоя на страницу

Ключом к использованию Glitch для создания руководств является возможность встроить код и представление презентации на страницу.

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

Совместная работа над ошибкой

На панели "Поделиться" значокПригласите соавторов для редактированияссылка позволяет вам пригласить кого угодно редактировать сбой в режиме реального времени вместе с вами.

Вы можете видеть их изменения по мере их внесения. Это круто!

Просить помощи

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

Откроется панель, на которой вы можете добавить языковой тег и краткое описание того, что вам нужно:

После этого ваш запрос будет показан на главной странице Glitch, и любой сможет его забрать.

Когда человек бросается на помощь, он видит выделенную вами строку, и я обнаружил, что комментарии - это хороший способ общения, как в чате:

Посмотреть журналы

НажмитеЖурналычтобы иметь доступ ко всем журналам приложения:

Доступ к консоли

На панели журналов естьКонсолькнопка. Щелкните его, чтобы открыть интерактивную консоль на отдельной вкладке в браузере:

Отладчик

Щелкнув поОтладчикна панели журналов, экземпляр Chrome DevTools откроется на другой вкладке со ссылкой на URL-адрес отладчика.

История изменений

Отличная особенность - возможность проверять все свои изменения в истории проекта.

Это очень похоже на то, как работает Git - на самом деле, Git поддерживает этот действительно простой в использовании интерфейс, который открывается нажатием кнопки ⏪:

Чем Glitch отличается от Codepen или JSFiddle?

Одно большое отличие, которое отличает Glitch от других инструментов, - это возможность запускать код на стороне сервера.

Codepen и JSFiddle могут запускать только код внешнего интерфейса, в то время как Glitch может даже использоваться в качестве легкого сервера для ваших приложений - с учетом ограничений использования.

Например, я настроил сервер Express.js, который запускается веб-перехватчиком в определенное время в течение дня для выполнения некоторых обязанностей. Мне не нужно беспокоиться о том, что он будет запущен на другом сервере, я просто написал его на Glitch и запустил прямо оттуда.

Вот и все!

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

Больше вопросов?

Я предлагаю просто попробовать и посмотреть, понравится ли вам тоже.

ВЧасто задаваемые вопросы о сбояхэто отличное место для начала.

Радоваться, веселиться!

Дополнительные руководства по услугам:

• Как начать с хостинга Firebase
• Учебник по размещению вашего статического сайта на Netlify
• Линтеры и средства форматирования кода для веб-разработчиков
• Автоматический запуск запускается на Netlify
• Glitch, отличная платформа для разработчиков
• Airtable API для разработчиков
• Как пройти аутентификацию в любом Google API
• Zeit Now Учебное пособие
• Учебное пособие по лямбда-функциям Netlify
• Как использовать Firebase Firestore в качестве базы данных
• Как я исправил завершающую косую черту в переписчиках Netlify
• Как получить доступ к параметрам запроса в функциях Netlify
• Как использовать переменные среды в функциях Netlify
• Как использовать пакеты npm в функциях Netlify
• Как создать свой первый VPS на DigitalOcean