CodePen: создание, тестирование, совместное использование и изучение HTML, CSS и JavaScript

Codepen: сборка, тестирование и изучение кода переднего плана

Одной из проблем, связанных с системой управления контентом, является тестирование и создание инструментов со сценариями. Хотя это не является требованием для большинства издателей, мне как изданию по технологиям нравится время от времени делиться рабочими сценариями, чтобы помочь другим людям. Я поделился, как использовать JavaScript для проверки надежности пароля, как проверьте синтаксис адреса электронной почты с помощью регулярных выражений (Regex), и совсем недавно добавил это калькулятор для прогнозирования влияния онлайн-обзоров на продажи. Я надеюсь добавить на сайт десятки инструментов, но WordPress не совсем подходит для таких публикаций… это система содержания, а не система разработки.

Итак, чтобы мои маленькие скрипты работали, мне нравится использовать CodePen. CodePen - это аккуратно организованный инструмент с панелью HTML, панелью CSS, панелью JavaScript, консолью и публикацией результирующего кода. Каждая панель содержит информацию, когда вы наводите курсор мыши на элементы, чтобы вы понимали, что возможно, а также цветовое кодирование вашего HTML, CSS и JS, чтобы облегчить вам редактирование и запись.

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

О CodePen

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

CodePen - калькулятор для прогнозирования влияния онлайн-обзоров на продажи

С помощью CodePen вы можете изменить вид, если хотите, чтобы панели находились слева, справа или снизу во время работы… или просматривать HTML-код на новой вкладке. Параллельный вид невероятно хорошо работает для проверки ваших адаптивных настроек, поскольку вы можете регулировать размер видимой панели.

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

Вы можете сохранить как GitHub Gist, экспортировать в zip-файл и даже вставлять перо в такой статье:

Увидеть перо
Прогнозируемое влияние онлайн-обзоров на продажи
by Douglas Karr (@douglaskarr)
on CodePen.


Одно из ограничений редактора Pen - это огромный объем кода. Возможно, вы никогда не столкнетесь с этой проблемой, поскольку редактор должен работать с сотнями или даже тысячами строк кода. Но когда они начнут набирать 5,000 - 10,000 XNUMX или более строк кода, вы увидите, что редактор начинает давать сбой. Однако вы можете добавлять внешние ссылки на таблицы стилей или JavaScript, размещенные в другом месте!

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

Пройдите по Douglas Karr на Codepen

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

Как вы думаете?

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