Как пользоваться codepen: подробное руководство для новичков

Codepen

Плюсы:


  • есть CSS-препроцессоры (очень существенное преимущество);
  • есть группировка сниппетов в коллекции, есть теги и поиск по сниппетам;
  • есть группировка по другим признакам, например — по популярности, а также можно посмотреть сниппеты, которые вам понравились или которые вы скопировали к себе;
  • можно открыть сниппет, отредактировать и сохранить — его адрес останется таким же, и не нужно обновлять коды фреймов с этим сниппетом. Можно открыть сниппет на другом компе (под своим аккаунтом), отредактировать и сохранить — это будет тот же сниппет, и его не нужно будет искать в истории;
  • сниппету можно добавить название и описание.

Минусы:

  • добавление в коллекцию неявное. На странице сниппета непонятно в какой коллекции он находится и добавлен ли вообще в какую-то подборку. При добавлении сниппета в коллекцию этого тоже не видно. Как-то очень криво сделано, надеюсь, исправят;
  • изменения в коде применяются с небольшой задержкой и только в окне редактирования;
  • живой предпросмотр в других браузерах — привилегия PRO-аккаунта ($9/month or $75/year);
  • периодически перестает обновлять превью (что может быть понятно не сразу), тогда приходится сохранять сниппет и перегружать страницу;
  • не показывает ошибки в JS;
  • комментирование кода по Ctrl + / работает только для выделенного блока. Нельзя быстро закомментировать строчку. Чтобы раскомментировать блок, нужно выделить его ещё раз, и не факт, что он раскомментируется — может ещё раз завернуться в комментарии, что очень неудобно;
  • не запоминает раскладку страницы.

Оба редактора умеют разворачивать Emmet-комбинации и сокращения CSS-свойств.

Codepen работает как социальная сеть: можно смотреть работы других пользователей, лайкать их, форкать, оставлять комментарии. Для меня первые комментарии к моим работам и лайки были полной неожиданностью : )) Можно смотреть на работы других пользователей, вдохновляться и находить новые идеи. Работы на главную страницу ресурса выбираются вручную, поэтому там много интересного. Также можно посмотреть самые последние и самые популярные сниппеты.

Свои сниппеты при этом представлены в виде удобной витрины с живыми превью. Их можно посмотреть по тегам или по коллекциям.

В итоге мои предпочтения разделились следующим образом: для быстрых экспериментов и отладки кода в разных окружениях — Jsbin, для основательных экспериментов, для демо и сохранения находок в удобном и доступном виде — Codepen.

Как пользоваться Codepen

Для начала работы на главной странице нужно выбрать «New Pen», создав тем самым новый проект (здесь он называется Pen). Вы увидите пустую «заготовку», состоящую из 4 окон.

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

В настройках (пиктограмма шестеренки) есть выбор нужного препроцессора для HTML, CSS и JavaScript, о которых мы говорили выше. Для JS доступна установка подключаемых библиотек, JQuery, например. Индивидуальная настройка каждого проекта в онлайн редакторе HTML кода — весьма полезный инструмент.

Также при кодинге нужно не забывать, что все ссылки и url-адреса в CodePen должны быть абсолютными (не относительными), т. е. указывать на полный адрес ресурса.

Для публикации разработанного примера найдете в правом нижнему углу страницы 3 кнопки:

Во всплывающем окне появится парочка настроек для встраивания кода, и вы сможете выбрать формат экспорта: HTML, iframe + даже специальные шорткоды для WordPress.

Кроме того, в меню и на главной странице Кодпен найдете такие фишки:

  • Pens — примеры кода с сортировкой по новым/популярным и т.п.;
  • Просмотр полноценных проектов (а не простых сниппетов);
  • Post — заметки из блогов и полезные публикации.
  • Collections — подборки нескольких Pens по определенным темам.
  • Еще есть вакансии, блог разработчиков и список полезных ссылок.


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

А вы пробовали данный сервис в своей работе? Как впечатления? Или используете альтернативные решения? 

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

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

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

Работаем с SCSS + Compass в CodePen

Настройку подключения SCSS + Compass в CodePen мы выполнили, осталось посмотреть, реально ли все работает. Да, действительно все нормально! Собственно, сам код SCSS внимательный читатель мог увидеть уже на рисунке “Основное окно CodePen”, когда говорилось о трех основных окнах CodePen. Там же можно было заметить, что рядом с надписью CSS появилась еще одна — (SCSS), что говорит о включенной поддержке SCSS.

На рисунке хорошо видны переменные SCSS и подключения mixin’ов из библиотеки Compass для создания радиуса скругления (), линейного градиента () и тени блока ():

Двойной щелчок мыши на значке квадратика в правом верхнем углу окна CSS(SCSS) распахивает его на всю ширину окна браузера для большего удобства работы с кодом:

А щелчок мыши на самой надписи CSS переводит окно в режим компиляции, то есть перевода SCSS в готовый CSS-код:

Клавиатурные сокращения CodePen

В заключение можно упомянуть горячие клавиши для работы в CodePen. В принципе, ничего неожиданного в списке сочетания клавиш для CodePen нет, кроме, может быть, единственного — новый проект (Pen) создается с помощью Ctrl+P (а ожидался стандартный Ctrl+N). Также заметно, что сочетания клавиш обозначены под Mac OS X (это естественно — у автора проекта рабочий компьютер Mac). Но это не значит, эти горячие клавиши не будут работать и под Windows:

Заключение

На этом статья о сервисе CodePen завершена. Конечно, можно было бы упомянуть о добавлении проектов Pen в Коллекции, о кнопке удаления Pen. Но я оставлю это в качестве “домашнего задания” для тех, кому это нужно.

Настройка CodePen — начало

В принципе, больше ничего нас в главном окне CodePen не интересует — ведь нам необходимо самим создавать “нетленные” работы! Для этого сначала нужно зарегистрироваться на CodePen, после чего получаем свой личный кабинет с настройками. Так как первоначально задача стояла в подключении SCSS + Compass в CodePen, то будет решать ее с первых шагов. В правом верхнем углу есть синий значок-аватар, по которому нужно щелкнуть мышью. Раскроется список, в котором необходимо выбрать строку “Your Settings”:

Все настройки CodePen уместились на одной странице и это замечательно! Окно разделено на четыре секции — Syntax Hightlighting, Fonts, Key Bindings, Preprocessor & Library Defaults. В принципе, здесь все интуитивно понятно:

Секция Syntax Hightlighting служит для выбора цветовой схемы подсветки синтаксиса с предварительным просмотром. Можно выбрать одну из пяти, но первая (по умолчанию) самая лучшая.

Секция Fonts помогает выбрать шрифт и размер шрифта. Выбор шрифтов небольшой, но лучше оставить Monaco — он лучше всех смотрится. Размер шрифта можете выбрать, какой вам нравиться.

Секция Key Bindings совсем простенькая — здесь можно выбрать сочетание клавиш при работе в CodePen. Normal — это обычный набор сочетаний клавиш, а Vim для тех, кто привык и хорошо себя чувствует в линуксовом (весьма своеобразном) редакторе Vim.

Секция Preprocessor & Library Defaults самая большая и самая необходимая для нас, ведь ради нее мы и зашли в настройки. В этом разделе можно установить, какие препроцессоры для HTML, CSS и JavaScript будут использоваться в каждом новом проекте, создаваемом в CodePen. В строке HTML Preprocessor ничего не делаем, так как препроцессорами для HTML не пользуемся. В строке CSS Preprocessor выбираем из списка SCSS, а в следующей строке CSS Preprocessor Add-on выбираем библиотеку под SCSS — Compass (for Sass). Строка CSS Reset служит для выбора “CSS-ластика”: CSS Reset или Normalize

Можно также обратить внимание на строчку Prefix Free?, в которой есть возможность поставить галочку:


Prefix Free — это JavaScript, созданный для того, чтобы работать с браузерными префиксами на самом современном уровне. Другими словами, этот скрипт фильтрует созданный CSS-код на предмет наличия в нем браузерных (вендорных) префиксов и проверяет, какие из них нужно использовать на сегодняшний день, а от каких уже можно отказаться. Польза Prefix Free в очистке CSS-кода от лишнего мусора и увеличение скорости загрузки в браузере.

Но продолжим разбор секции Preprocessor & Library Defaults. Три последние строчки относятся к поддержке JavaScript в CodePen. В строке JS Preprocessor выбирается препроцессор JavaScript, в строке JS Library — подключаем библиотеку JavaScript, а в строчке Modernizr? отмечаем, нужна ли нам встроенная поддержка JavaScript-библиотеки Modernizr.

Последняя строчка Auto Run? очень полезна и по умолчанию она включена. Ее задача автоматически обновлять создаваемый проект в окне предпросмотра. Очень удобная функция. К примеру, в jsFiddle этого нет, там нужно самому нажимать кнопку Run каждый раз, когда нужно обновить окно предпросмотра после внесения изменений в исходный код.

Вот и все, что можно или нужно сделать в настройках CodePen. Сохраняем изменения, нажав большую зеленую кнопку Save All Settings в нижнем правом углу окна.

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

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

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

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

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

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

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

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

Основные фишки и функции CodePen

Сразу следует оговориться, что рассматриваемый сервис не охватывает все разнообразие языков программирования. Вероятно, это достаточно труднореализуемая задача для онлайн решений, лучше в таких случаях юзать специализированный софт по типу PHP IDE Codelobster, Phpstorm и др. Codepen ориентирован исключительно на Web и поддерживает язык разметки HTML, каскадные таблицы стилей CSS + JavaScript, что наиболее часто применяются в создании сайтов. Этих трех направлений вполне достаточно, чтобы обеспечить востребованность сервиса в профессиональной среде.

В принципе, возможности CodePen отчасти похожи на различные редакторы кода, которые многие используют в своей работе: начиная от Notepad++, Sublime Text и заканчивая чем-то посложнее вроде Webstorm. Конечно, я говорю не о полной копии всех фишек софта, а лишь о базовых функциях написания кода. Однако вместе с тем данный CSS / HTML онлайн редактор обладает уникальными особенностями отличающими его от, названных выше, конкурентов. Я бы выделил 4 ключевых аспекта.

1. Всеобщая доступность

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

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

2. Легкость работы и онлайн просмотр кода

Наличие виртуального сервера в Кодпен дает возможность просматривать код совместно с результатом его выполнения. Вам нет смысла устанавливать и настраивать сервер и дополнительные приложения на локальном компьютере. Не смотря на то, что наборы XAMPP и Денвер достаточно просты в использовании, вариант с визуальным редактором кода онлайн вообще не требует никаких усилий. Такой подход весьма удобен для изучения верстки с нуля.

3. Профессиональные инструменты

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

  • Для css редактор позволяет использовать библиотеки Normalize.css или Reset.css. Также можно подключить -prefix-free / Autoprefixer.
  • Имеется интеграция с CSSLint, который проверяет правильность написанного CSS кода.
  • Поддержка Emmet и Vim Binding с разными горячими клавишами и фишками для ускорения кодинга.
  • Данный визуальный онлайн редактор HTML CSS и JavaScript корректно рабоает с препроцессорами: HAML, Markdown, Slim для HTML, в стилях — Sass и SCSS, плюс CoffeeScript в JS.

И все это без каких-либо установок дополнительного софта на компьютере!

4. Имеющееся сообщество

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

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

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

Главная страница CodePen

Первое, что необходимо, это конечно же зайти на данный ресурс по адресу http://codepen.io. Тем, кто первый раз попал сюда, может зарябить в глазах, но это с непривычки:

Главная страница CodePen

Самое основное на главной странице – это окна с готовыми работами других веб-мастеров. То есть, люди работали в этом сервисе, написали и протестировали какой-то код; и этот код в готовом виде демонстрируется в различных окошках проекта CodePen. Выборка работ производится в случайном порядке, насколько я понимаю.

Внизу каждого “окошка” с готовой работой показаны метаданные – информация об авторе. К примеру, рассмотрим код, созданный автором по имени Yaroslav. Видим, что веб-мастер экспериментировал с созданием на CSS различных продвинутых типов background (насколько правильно я понял его работу чисто по внешнему виду, исходный код не смотрел). Комментариев к его работе никто не пожелал оставить, хотя ознакомилось с ним уже 129 человек и семерым из них он даже понравился.

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

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

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

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

Вкладка HTML

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

Jsbin

Плюсы:

  • моментально применяет изменения, сделанные в коде;
  • также моментально применяет их в любом браузере, где открыт этот сниппет (очень удобно для тестирования в разных браузерах, на разных виртуалках и мобильных устройствах);
  • показывает ошибки в JS;
  • умеет комментировать/раскрывать код под Ctrl + /;
  • есть Less.

Минусы:

  • сохраняет сниппеты в виде одной ленты, где они сгрупированы по родительскоу сниппету, внутри этой группы — по времени создания. Ручной группировки нет;
  • если открыть сниппет и начать его редактировать, он сохранится под новым номером. Это приводит к неконтролируемому росту их количества: у меня уже больше 1000, и как в них искать нужное — непонятно. Кроме того, если где-то вставить сниппет на страницу — после редактирования надо будет обновить в коде фрейма номер сниппета;
  • нет препроцессоров нет Sass;
  • ломает кириллицу: в сниппетах внезапно можно обнаружить кракозябры вместо русского текста.

Jsbin работает как личная песочница, нет взаимодействия с другими пользователями, не нужно забоиться о том, что бардак рабочий процесс в твоей песочнице кто-то увидит : ) Отсутствие взаимодействия с другими пользователями сервиса помогает не отвлекаться от кода, это можно считать плюсом.


С этим читают