Как пользоваться редактором кода Codepen

В этой статье я расскажу вам, как эффективно пользоваться редактором кода Codepen, фронтенд-разработчику. Codepen – это онлайн сервис, где можно прямо в браузере писать HTML, CSS и JavaScript код, а также подключать разные библиотеки, например Bootstrap, jQuery и сразу видеть результат. Кроме того, там можно найти уже готовый код различных веб-компонентов, посмотреть, как они реализованы другими веб-разработчиками.

Почему я рекомендую Codepen?

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

Codepen – копилка наработок

Во вкладке Pen, вы можете увидеть готовые примеры, как ваши коллеги, реализуют те или иные задачи по веб-разработке и поучиться у них. Так же очень удобно воспользоваться поиском, если вас интересует что-то конкретно. Например вы хотите посмотреть, как сделать "гамбургер меню", так и пишите "burger menu" в поиске, на английском найдется гораздо больше пенов.

Понравившийся вам пен можно для начала добавить в свою коллекцию – Add collection. В дальнейшем вы можете скачать zip-архивы с нужными пенами, нажав на Export.zip, в правом нижнем углу, в архиве находятся HTML, CSS и JS файлы, немного изменив стили под свой проект, можно избавить себя от рутины "написания однотипного кода" стандартных веб-компонентов.

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

Уникальность статей и Codepen

Как можно ещё использовать готовые пены? Например, вы пишите статьи на тему веб-разработки, перейдя на вкладку Embed This Pen, можно скопировать и вставить нужный пен в вашу статью, как HTML-код или iframe, а так же шорткод для Wordpress. Если пенов будет несколько на странице, то можно поставить галочку – "Use click to load" и тогда пен будет загружаться по клику, что улучшит скорость загрузки страницы.

Я знаю, по личному опыту, что иной раз добиться уникальности, написанной мною статьи, практически невозможно, если весь код из примеров, как есть, вставлять в тело статьи. Разумеется, что перед тем, как опубликовать статью, я проверяю её на уникальность на специальных сервисах. Если статья не содержит фрагментов демонстрации кода, то все OK, уникальность 100%, с кодом уникальность теряется. Всё дело в том, что HTML, CSS и JS код сам по себе не уникален и уже использован в десятках других статей.

Проблема решается таким образом. Я пишу весь код примера в Codepen и через embed вставляю ссылку на пен в свою статью. Таким образом, мои пены попадают в общую копилку знаний сервиса, их могут использовать другие разработчики по своему усмотрению, мне не жалко.

Обзор вкладок Codepen

Вкладки Collection и Pattern – содержат пены, сгруппированные по тематикам. Например вы можете найти массу примеров табов, кнопок, меню и много других элементов.

Вкладка Post содержит статьи на актуальные темы, связанные с веб-разработкой.

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

Создание своих пенов на Codepen

Для сохранения написанного вами пена необходимо создать аккаунт. Базовый функционал Codepen бесплатен. На бесплатном аккаунте можно создать только New Pen и New Post.

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

Вкладка HTML

В один клик можно вставить мета-тег viewport для корректного отображения на мобильных устройствах. Pen Title, Description, Tag необходимо заполнить, чтобы вашу работу могли найти по ключевым словам другие разработчики.

Вкладки CSS / JS

Можно быстро подключить стилевые и JS файлы самых популярных фреймворков и библиотек.

Возможности платного аккаунта Codepen

$12 в месяц

Есть возможность создавать приватные, закрытые от всех, кому их не нужно видеть пены. Для преподавателей доступен режим – Professor Mode. Студенты могут смотреть уроки в реальном времени и общаться в чате. PRO-аккаунт позволяет создавать проекты - Projects с файлами и папками и загружать в них свои файлы, изображения и шрифты, проводить кроссбраузерное тестирование.

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