popcode

Поп -код

PopCode - это простая среда редактирования HTML/CSS/JavaScript для использования в классе. Это очень похоже на JSBIN, JSFIDDLE или CODEPEN, но он фокусируется на предоставлении конкретной, непосредственной, дружелюбной для человека обратную связь, когда код содержит ошибки.

Статус проекта

PopCode является официальной средой редактирования для программы Intro Code Nation для веб -разработки в 2019–2020 учебном году.

Попробуйте это

Вы можете попробовать поп -код по адресу https://popcode.org .

Оглавление

• Функции
  • Об подтверждении
  • Функция дорожной карты
• Технические детали
  • Обзор архитектуры
• Внося
  • Бег на местном уровне
  • Режим отладки
  • Ссылка разработчика
• Лицензия
• Участники
• Благодаря
• Контакт

Функции

• Редактировать HTML, CSS и JavaScript в браузере; Предварительные обновления в браузере при вводе.
• Получите немедленные, всеобъемлющие, простые в понимании отзывы о проблемах в вашем коде.
• Ошибки нельзя игнорировать. Если в коде есть какие -либо ошибки, превью в прямом эфире заменяется списком ошибок.
• Ошибки времени выполнения JavaScript также сообщаются на языке, подходящем для человека, а аннотации в исходном коде указывают на источник проблемы.
• Вход в один щелчок с использованием учетной записи GitHub; Вся работа сохраняется удаленно для пожарной базы при регистрации.
• Выпредит предварительный просмотр веб -страницы в собственном окне.
• Экспорт в GitHub Gist.
• Импорт стартовый код из GitHub Gist.

Об подтверждении

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

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

Технические детали

PopCode использует реагирование на представления рендеринга, Redux для управления состоянием приложения, ACE в качестве редактора кода, WebPack для упаковки приложения на стороне клиента и Babel для составления современного JavaScript для совместимости с устаревшими версиями браузера.

PopCode обнаруживает ошибки в коде студента, используя SlowParse, HTMLLINT, HTML -инспектор, переработку CSS, PrettyCSS, StyleLint, JSHINT и ESPRIMA.

Внося

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

Быстрый старт

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

PopCode поставляется с средой разработки, включенной в батареи, построенной на nodeenv . Вам нужно будет установить Python; Любая версия 2.7+ будет работать. Чтобы настроить среду, запустите:

$ tools/setup.py

Это установит node и yarn в изолированной среде в каталоге nodeenv корневого проекта. Это не будет мешать какой-либо системе установки этих инструментов.

После завершения настройки, чтобы запустить сервер разработки, запустите:

$ tools/yarn.py start

Это запустит сервер на http: // localhost: 3000

Чтобы запустить тесты в режиме наблюдения, запустите:

$ tools/yarn.py autotest

Проверьте раздел "scripts" package.json для других полезных инструментов.

Разработка в коде VS

PopCode поставляется с надежной пользовательской конфигурацией кода и кодом, которая автоматически включена tools/setup.py . Если вы используете VS -код, вы можете:

• Запустите команду Show Recommended Extensions , чтобы легко установить расширения, которые улучшают опыт разработчика PopCode
• Запустите сервер, запустите тесты и многое другое, введя task в быструю открыту
• Отладка либо в вашей среде разработки, либо тест на шутку, введя debug в быстрый открытый бар

Использование других редакторов

PopCode использует такие инструменты, как более Creatier, Eslint и StyleLint для автоматического формата кода. Мы рекомендуем настройку плагинов редактора для автоматического формата при сохранении; В качестве альтернативы, вы можете запустить tools/yarn.py lintfix прежде чем принять участие в формате и автофиксе. Официальная интеграция кода PopCode и кода (с установленными рекомендуемыми расширениями) делает это из коробки.

Альтернативная среда разработки (продвинутая)

Не требуется, чтобы вы использовали официальную среду разработки для работы на поп -коде; В основном вам просто понадобятся правильные версии узла и пряжи, установленные на вашей машине (проверьте раздел "engines" package.json для текущих версий).

Ссылка разработчика

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

• Отреагируйте на построение пользовательского интерфейса
• Redux для управления состоянием приложения
• Postcss-preset-env дает нам передовые функции CSS
• Модификатор элемента блока предоставляет соглашение о организации классов DOM
• WebPack создает JavaScript
• Шутка - это тестовая структура

Лицензия

Попкод распределяется по лицензии MIT. См. Прилагаемый файл лицензии для всех грязных деталей.

Участники

• Мат Браун (сопровождающий)
• Alejandro AR
• Вайбхав Верма
• Алекс Пелан
• Кэрол Чау
• Джесси Ван
• Эрик Льюис
• Раззи Абуасса
• Джереми Шрейдер
• Лео Маклай
• Фредерик Бродбек
• Бен Йелси
• Аарон Гринберг
• Питер Яблонски
• Ten-young guh
• Илона бренд
• Кейли Ноулз
• Фелисия Вонг
• Тим Миллер
• Бруно Гарсия
• Кори Эцкорн
• Ник Вольпе
• Крейг Итурбе
• Уайли Конлон
• Гари Панг
• Алессия Беллисарио
• Роан Катуу
• Harpreet Singh
• Лимон Монте
• Мэтью Армстронг
• Мэтт Гарбис
• Илья Грибов
• Чейз Старр
• Алек Мердлер
• Эрик Снелл
• Омар де Лео
• Дэвид Шен
• Мэгги Уокер
• Джошуа Лин
• Таймур Само
• Рональд Мартин
• Ян Планкетт
• Адриан Фаллейро
• Кэти Коннелили создала имя поп -код имени
• Дизайн логотипа, концепция «Поп» и элементы брендинга от команды в Red Peak: Эндрю Хауг, Ая Кавабата, Цзеун Ли, Ачу Фонс, Ивона Валук, Стюарт Девлин и Кэти Коннелли
• Пользовательский интерфейс, разработанный Ариэлем Лю, Яном Джонсом, Меган Нолл и Саймоном Лессером.

Благодаря

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

Контакт

Не стесняйтесь написать мне по электронной почте по адресу [email protected], если у вас есть какие -либо вопросы.

Вы можете найти нашу команду Slack, включая наш канал #DEV, здесь.