Как пользоваться CodePen: подробное руководство для новичков
CodePen — онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.
Кому и когда может пригодиться CodePen
Инструмент можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. CodePen будет полезным всем разработчикам, имеющим дело с фронтендом.
Песочницу часто используют преподаватели программирования и вёрстки для демонстрации учебного кода. CodePen применяют авторы статей о разработке, когда нужно показать читателям пример кода.
Как пользоваться CodePen: базовые настройки и возможности
Попробовать песочницу можно без регистрации. Но чтобы иметь возможность сохранить код, нужно зарегистрироваться.
После регистрации создайте новый пен: нажмите кнопку Pen в меню.
На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.
Пен готов к работе
Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.
В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.
Подключаем библиотеку Watch.js
В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.
После выбора настроек приступайте к работе. Обратите внимание, если вы отключили автообновление превью, для просмотра результатов нужно нажать кнопку Run.
Запускаем пен повторно, чтобы посмотреть превью после внесения изменений
В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.
Выбираем режим и лэйаут
Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:
«Продвинутые» режимы доступны владельцам PRO-аккаунта
Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.
Работаем с консолью
Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.
Загрузка фото и других файлов
Выше описаны базовые инструменты и настройки CodePen, которых достаточно для того, чтобы создать пен и протестировать код. Дальше пойдёт речь о дополнительных возможностях CodePen.
Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.
Как работать с чужими публикациями, экспортировать и встраивать пены
На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.
Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.
В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.
Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.
Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.
Прямые ссылки на код
Как работать с редактором проектов, писать посты, создавать коллекции
Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.
В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается в реальных проектах. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.
Интерфейс редактора проектов
В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.
Возможности для блогеров
Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.
Добавляем пен в коллекцию
Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами
CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.
Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.
Перетяните лучшие пены в раздел Showcase.
Выберите лучшие работы и отправьте их в портфолио
В разделе Activity можно следить за взаимодействием пользователей с вашими пенами. В журнале сохраняются записи, когда кто-то лайкает, добавляет в коллекцию, форкает пен, подписывается на обновления и так далее. Вы тоже можете зафолловить других пользователей и следить за их активностью.
Следим за активностью пользователей
В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.
Ищем контент по интересам
В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников — платная функция, стоимость составляет 299 долларов за 60 дней.
Ищем работу и работников на CodePen
CodePen: больше чем песочница кода
CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.
В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.
8 Потрясающих возможностей CodePen для программирования и веб-разработки
Начало работы с веб-разработкой на JavaScript может быть разочаровывающим процессом, но существуют инструменты, облегчающие его.
CodePen.io — это среда кодирования в браузере, предназначенная как для обучения написанию кода, так и для быстрого прототипирования идей с минимальными трудностями.
В этой статье мы рассмотрим некоторые функции сайта и то, как они могут помочь вам стать лучшим программистом.
Что такое CodePen?
CodePen предоставляет то, что называется ручка, который содержит три разных окна для HTML, CSS и JavaScript, а также панель предварительного просмотра, которая обновляется в режиме реального времени по мере ввода текста.
Хотя он часто используется веб-разработчиками для демонстрации идей для веб-сайтов, он также является отличным местом для изучения основ интерфейсной веб-разработки. Вот наиболее заметные функции, которые вам необходимо знать при использовании CodePen.
1. Препроцессоры
Препроцессоры — это интерпретируемые или скомпилированные языки, предназначенные для упрощения кодирования. Они могут добавлять функции в язык для удобства и облегчают чтение кода. В веб-разработке комбинация препроцессоров для HTML, CSS и JavaScript используется для быстрого создания чистого кода.
Если вы изучаете веб-разработку и хотите попробовать разные препроцессоры, CodePen позволяет вам переключать препроцессоры на лету и видеть код, который он компилирует, в режиме реального времени. Каждая из трех панелей в приложении CodePen имеет раскрывающееся меню в правом верхнем углу. Выбрать Посмотреть скомпилированный HTML / CSS / JS чтобы увидеть, как код будет интерпретирован.
В этой ручке мы создали простой сайт, используя Haml а также пререкаться стилизовать некоторый текст заголовка. выбирающий Посмотреть скомпилированный показывает стандартные HTML и CSS. В этом примере разница минимальна. Однако при изучении нового языка может быть полезно посмотреть, как выглядит предварительно обработанный код после компиляции.
2. Внешние ресурсы
Наряду с собственной поддержкой препроцессоров, CodePen поддерживает внешние скрипты. Это делает его идеальным местом для получения практического опыта работы с библиотеками для ваших личных проектов или для изучения популярных библиотек веб-приложений, таких как React.
Чтобы добавить внешнюю библиотеку, откройте настройки панель на вашей ручке и перейдите на вкладку JavaScript. Существует два способа добавления ресурсов: добавление URL-адреса ресурса вручную или поиск.
Мы использовали эту функцию в нашей статье, посвященной веб-анимации с mo.js, а также предварительной обработке Babel.
Смотрите пример Pen Mojs MUO Яна (@Bardoctorus) на CodePen.
Да, ручки CodePen могут быть встроены! Идите вперед и нажмите на панель предварительного просмотра выше, чтобы увидеть результаты урока Mo.js!
Другие ручки могут быть импортированы так же, как внешние библиотеки. Это означает, что вы можете использовать элементы из ранее написанных перьев, чтобы использовать их как модули в новых перьях. Пользователь CodePen Ручка Adam Simple Poll — хороший тому пример.
3. Шаблоны
Когда вы изучаете новые концепции или тестируете новые идеи, вы часто используете похожие компоненты и заново читаете одни и те же шаги. CodePen позволяет создавать перья шаблонов, которые могут исключить повторение, и позволяют сразу перейти к сути.
Чтобы создать шаблон, откройте новое перо, внесите изменения и выберите шаблон ползунок в меню настроек.
До недавнего времени бесплатные пользователи могли создавать только три шаблона, но теперь все пользователи могут иметь столько шаблонов в своей учетной записи, сколько они хотят. Идеально подходит для начала новой идеи с минимальной задержкой!
4. Режим совместной работы
Способность сотрудничать и преподавать с CodePen может быть его большим преимуществом. Уже есть множество отличных инструментов для совместной работы программистов, но подход CodePen прост и интуитивно понятен.
Профессиональные пользователи CodePen могут создать новое перо и открыть его для совместной работы под Сменить вид меню. Это превращает ссылку пера в совместное приглашение, рассчитанное на большое количество людей, в зависимости от вашего плана CodePen Pro.
В этом случае я писал HTML, пока друг обновлял CSS в режиме реального времени, с помеченным курсором, идентифицирующим, где они работают.
Любой, у кого есть ссылка, может присоединиться и использовать функцию чата в браузере, независимо от того, являются ли они профессиональными пользователями или даже имеют учетную запись CodePen. При условии, что автосохранение отключено, только владелец ручки может сохранять любые изменения, что делает его безопасным способом открыть свой код для других без риска.
Открытый характер этого режима полезен для начинающих, так как вы можете пригласить в перо практически любого, чтобы он помог вам в решении сложной задачи. Это также удобный способ узнать свой путь, так как он идеально подходит для проведения собеседований с потенциальными сотрудниками и уже профессионально использовался таким образом!
5. Профессор Мод
Режим «Профессор» позволяет одному пользователю Pro вести комнату, в которой только он может редактировать код. От 10 до 100 пользователей могут смотреть и общаться в зависимости от Pro плана хоста.
Режим «Профессор» обеспечивает гибкость между учебой в классе и дистанционным обучением или сочетанием двух. Использование режима «Профессор» позволит тем, кто находится в конце класса, иметь такой же опыт, как и людям, находящимся в начале, и учителю показывать исправления, которые будут обновляться в режиме реального времени.
6. Режим презентации
Неудивительно, что режим презентации разработан с учетом представления кода. Приложение отображается в упрощенном виде, предназначенном для работы с оверхед-проекторами. CodePen оптимизировал режим презентации для использования на низкоскоростных интернет-соединениях и более слабом оборудовании.
Проницательные читатели, возможно, уже поняли, что бесплатная версия CodePen обеспечит именно эту функцию, хотя в режиме Pro есть несколько полезных функций. Макет, размер шрифта и темы могут быть быстро изменены на лету, чтобы соответствовать практически любым настройкам, а при отображении ссылки на перо появляется сокращенный URL-адрес большого размера, облегчающий совместное использование проекта.
Эти небольшие изменения, а также возможность масштабирования окна предварительного просмотра в соответствии с тем, что вы демонстрируете, делают режим презентации идеальным как для преподавателей, так и для разработчиков, представляющих идеи коллегам. Режим презентации — это также чистый и простой способ представления кода, если вы берете интервью на позицию программиста
7. Шаблоны
Поиск вдохновения стал намного проще с коллекциями шаблонов проектирования CodePen.
Каждая категория представляет собой набор примеров кода, предоставляемых пользователями CodePen для конкретных задач. Вы ищете способ создания динамических кнопок для вашего сайта? Аккордеонные меню? Существует множество категорий, подходящих практически для любого примера.
Эти шаблоны также являются отличным способом узнать, как работают интерактивные кнопки, и различными способами работы динамических пользовательских интерфейсов.
8. Эммет
Emmet, ранее известный как Zen Coding, широко рассматривается как лучшая экономия времени для разработки HTML и CSS. Плагин берет часть кода, который вы часто пишете, и преобразует их в простые ярлыки.
Видеть это в действии лучше, чем объяснять, поэтому возьмите обычную настройку для документа HTML:
Добавление этого к каждому документу HTML было сокращено до двух действий. Используя Emmet, введите ! и ударил табуляция ключ. Магия!
Emmet в качестве стандарта активен в CodePen и особенно полезен, если вы пытаетесь изучить новую концепцию в JavaScript и хотите быстро создать поддерживающий HTML и CSS.
Разработка с CodePen для лучшего опыта
CodePen — отличный инструмент для веб-разработчиков, и эта область постоянно расширяется. JavaScript — отличный язык для изучения в будущем в веб-разработке.
Есть несколько отличных учебных пособий и курсов для людей, желающих начать работу с JavaScript.
и CodePen — отличная среда для проверки ваших новых навыков.
Платформа Codepen
Codepen — это популярная онлайновая платформа для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. Полученным кодом можно делиться и видоизменять его при необходимости. Окно браузера делится на несколько рабочих областей, в которых отображается результат, а также код на HTML и CSS (рис. 1).
Codepen не требует регистрации, но это рекомендуется сделать, если вам часто приходится пользоваться данной платформой. Это добавляет возможность управлять набором разного кода и возвращаться к его редактированию. Начать с чистого листа можно по этой ссылке:
Или перейти к готовому коду по заранее известной ссылке, вроде этой:
Поскольку нас интересует не сам CSS, то для начала надо щёлкнуть по шестерёнке возле заголовка и в открывшемся списке задать Less. Тип выбранного препроцессора подсвечивается зелёным цветом и отображается в заголовке рабочей области (рис. 2).
Кроме того, там же можно указать следующие настройки.
Переключение между Less и готовым CSS делается при щелчке по иконке глаза, показанной на рис. 3. Итоговый CSS править нельзя, но допустимо выделить его и скопировать.
Рис. 3. Иконка для переключения вида
Кодом можно поделиться, предварительно сохранив его и скопировав адрес в браузере. Адрес всегда уникален и однозначно ведёт к нашему коду. Так что эту ссылку можно писать на форумах и в комментариях для демонстрации кода и результата. Кроме того в Codepen есть специальная кнопка Share, щёлчок по которой открывает специальное меню (рис. 4).
Через Share можно поделиться кодом в социальных сетях, скачать полный архив и получить прямую ссылку на код HTML, CSS или Less.
Руководство по использованию CodePen: помогите нам, и мы поможем вам
Использование CodePen с целью рассказать о своей проблеме это наиболее оптимальный способ, потому что можно непосредственно запустить код и оперативно исправить его. С помощью этого прекрасного сервиса, мы можем поделиться своим кодом, а другие смогут его отредактировать и сделать свою версию, чтобы показать правильный вариант.
Для начала проследуйте на сайт сервиса CodePen ( http://codepen.io ).
На главной странице вы можете просмотреть различные красочные примеры, но нас интересует кнопка « Новый Pen » (New Pen) — все проекты в сервисе называются Pen.
**Убедитесь, что вы верно проставили ссылки на все ресурсы, такие как изображения — они должны быть абсолютными, то есть содержать полную ссылку на ресурс, а не относительными.**
Вы можете провести индивидуальную настройку для каждого типа кода, просто нажав на значок шестеренки вверху.
Аналогично, для окна JavaScript, вы можете произвести собственные настройки, например, сослаться на внешний JS-файл или другой Pen.
Когда ваш Pen готов для публикации, нажмите кнопку « Save » в левом верхнем углу страницы, чтобы сохранить его.
Затем нажмите кнопку « Share » чтобы поделиться своим кодом с другими. Если у вас PRO-аккаунт, то вы имеете более гибкие возможности. Если вы анонимный пользователь, то у вас есть возможность использовать функцию « Full Page » – то есть, даже не регистрируясь, вы можете поделиться с другими своим Pen`ом, вместо простой передачи исходников.
9 причин, по которым вы должны использовать CodePen
В CodePen.io они описывают себя как «площадку для внешнего интерфейса в Интернете». CodePen отлично подходит для тестирования ошибок, совместной работы и поиска новых идей. Он работает, позволяя создавать «ручки», которые представляют собой наборы HTML, CSS и JavaScript. Затем вы можете отобразить эти ручки в своем профиле, принять обратную связь и продолжить редактировать эти ручки в любое время.
Как и на многих игровых площадках с живым кодом, CodePen позволяет вам учиться в среде с открытым исходным кодом, отображая предварительный просмотр изменений кода и даже позволяя встраивать свои демонстрации CodePen на любую веб-страницу, как показано ниже.
В этой статье я выйду за рамки только что упомянутых функций, чтобы объяснить некоторые вещи, которые, по моему мнению, ставят CodePen выше конкурентов, и почему вы должны проверить это, если вы еще этого не сделали.
Объясняя эти функции, я также добавлю несколько случайных, но интересных ручек в каждый раздел, чтобы вы могли их проверить.
1. Настройки CSS
Что если вы не уверены в том, что некоторые из ваших методов CSS используются? Не волнуйся; CodePen имеет интеграцию с CSSLint для поиска в вашем коде CSS и предупреждения о наличии ошибок, предупреждений, плохой поддержки браузера и т. Д.
2. Ароматы HTML, CSS и JavaScript
CodePen поддерживает множество разновидностей HTML, CSS и JavaScript. Для HTML вы можете использовать HAML, Markdown, Slim или даже Jade. Для CSS они поддерживают Sass и SCSS (оба с дополнительным дополнением Compass или Bourbon), а также Less и Stylus.
В меню JavaScript вы можете выбрать CoffeeScript или LiveScript. Существует также выпадающее меню, в котором вы можете получить последнюю версию таких вещей, как jQuery и AngularJS.
3. Эммет и Вим Биндинг
CodePen — все о более быстрой и плавной разработке. Вот почему они используют наборы инструментов, такие как Emmet, чтобы помочь проектам двигаться вперед. Редактор CodePen позволяет использовать привязки клавиш Vim, которые являются сочетаниями клавиш командной строки. Оба эти инструмента вместе могут помочь создать более быстрый рабочий процесс.
4. Коллекции и метки
Вы можете добавить теги в свои ручки, которые затем становятся доступными для поиска. Поиск по таким тегам, как « Загрузчик » и « Форма », приносит массу полезного вдохновения.
Если вы хотите, вы можете даже создавать коллекции ручек, относящихся к определенной теме. Крис Койер, один из соучредителей CodePen, создал такие коллекции, как « Path Drawing » и « Repeating Patterns ».
5. Различные виды пера
CodePen имеет в общей сложности 8 различных видов для ручек. Каждый вид имеет свои преимущества.
Вид редактора — это вид по умолчанию для редактирования перьев. Вы можете настроить размер средства предварительного просмотра кода и выбрать языки для отображения.
Подробное представление — это представление позволяет просматривать теги пера, сердечки, комментарии, раздвоенные ручки и т. Д. Он содержит большинство социальных функций CodePen.
Полный просмотр страницы — это довольно очевидно. Это делает ваше перо полноэкранным в пределах iframe, оставляя только нижний колонтитул CodePen.
Просмотр отладки — Просмотр отладки — это полноэкранный режим, но с дополнительными функциями. Он удаляет iframe и нижний колонтитул CodePen для облегчения доступа к консоли JavaScript. Это отлично подходит для тестирования кода, который, по вашему мнению, может мешать CodePen.
6. CodePen Pro Просмотров
Режим презентации — этот режим создан специально для оверхедов. Он удаляет заголовок, чтобы дать вам больше места и позволяет быстро изменять размер шрифта и цвета редактора кода. Вы также можете изменить размер предпросмотра без изменения кода.
Live View — с CodePen Live View у вас есть полноэкранное отображение вашего пера. При редактировании этого пера оно будет автоматически обновляться при вводе. Это часто используется при тестировании на нескольких устройствах.
Режим профессора — этот режим позволяет людям просматривать ваш код в режиме реального времени. Существует также окно чата, где профессор и студенты могут общаться.
Режим Collab — Режим Collab позволяет нескольким программистам одновременно вносить изменения в ручку. Также есть окно чата, как в режиме профессора.
7. Блоггинг
Вы можете писать с помощью Markdown и использовать специальный инструмент для встраивания, чтобы встраивать ручку, когда это необходимо. Вы можете добавить собственный CSS к своим сообщениям, и есть супер простой предварительный просмотр, чтобы проверить ваш пост.
8. Сообщество
9. Вдохновение
Впечатляющие ручки всегда отображаются на главной странице, а также отличные статьи и коллекции. Ручки представляют собой и вдохновение, и интересный способ учиться. Поиск с помощью удивительных ручек может помочь улучшить вашу собственную работу и улучшить ваши знания HTML, CSS и JavaScript.
Ниже приведены некоторые выдающиеся демонстрации, чтобы проверить:
Вывод
В конечном счете, использование CodePen может помочь вам быстрее учиться и стать частью большого сообщества. Статьи на SitePoint часто используют CodePen для встраивания кода для учебных пособий. И если вы заинтересованы в более замечательных функциях CodePen, проверьте их:
