Как пользоваться 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 доступны режимы с расширенными возможностями:
- Live View — демонстрация пена в режиме реального времени.
- Collab Mode — режим групповой работы над пеном.
- Professor Mode — режим для преподавателей.
- Presentation Mode — режим для демонстрации пена с помощью проектора.
«Продвинутые» режимы доступны владельцам 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
В разделе Grow — Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.
CodePen: больше чем песочница кода
CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.
В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.
Площадка для тестирования CodePen
Любому веб-мастеру необходима площадка для тестирования. На сегодняшний день таких проектов около десятка. Есть старые проекты, есть молодые; более “навороченные” или менее “навороченные”. Каждый из мастеров выбирает себе тот, который ему больше всего нравиться.
Наиболее популярные сервисы такого рода это CodePen и jsFiddle. Лично мне больше нравиться jsFiddle, но у него есть один существенный для меня недостаток (точнее — их два на самом деле). В этом сервисе можно выполнить замену CSS на SCSS, но подключить библиотеку Compass — нельзя. И еще там нет автоматического обновления создаваемого проекта.
Другой сервис — CodePen является идеальным инструментом для веб-мастера или верстальщика. В нем есть все, что нужно и ничего лишнего. Может быть, это потому, что проект был создан хорошо известным Cris Coyier?
Данная статья, возможно, никогда не была бы написана, если не одна причина — я не знал, как в этом сервисе подключить поддержку SCSS + Compass. Решение лежало на поверхности, достаточно было “остановиться на бегу” — выделить немного времени на изучение этого проекта.
Ниже привожу подробное и красочное описание работы с CodePen в картинках. Точнее — это будет описание основных, самых основных или ключевых моментов при написании кода в CodePen.
Главная страница CodePen
Первое, что необходимо, это конечно же зайти на данный ресурс по адресу http://codepen.io. Тем, кто первый раз попал сюда, может зарябить в глазах, но это с непривычки:
Самое основное на главной странице — это окна с готовыми работами других веб-мастеров. То есть, люди работали в этом сервисе, написали и протестировали какой-то код; и этот код в готовом виде демонстрируется в различных окошках проекта CodePen. Выборка работ производится в случайном порядке, насколько я понимаю.
Внизу каждого “окошка” с готовой работой показаны метаданные — информация об авторе. К примеру, рассмотрим код, созданный автором по имени Yaroslav. Видим, что веб-мастер экспериментировал с созданием на CSS различных продвинутых типов (насколько правильно я понял его работу чисто по внешнему виду, исходный код не смотрел). Комментариев к его работе никто не пожелал оставить, хотя ознакомилось с ним уже 129 человек и семерым из них он даже понравился.
При щелчке мыши на любом из заинтересовавших проектов (прямо в окошко) открывается его исходный код, с которым можно детально ознакомиться при желании.
Настройка 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 в нижнем правом углу окна.
Быстрая настройка CSS-препроцессоров в CodePen
Стоит также сказать, чтобы настройки, рассмотренные выше, можно внести в создаваемый проект “на лету”. Для этого нужно щелкнуть мышью на значке шестеренки в окне кода CSS. Появиться небольшое окошко с выбором одного из четырех CSS-препроцессоров: SASS, SCSS, LESS, Stylus. Также можно выбрать CSS-ластик: Normalize, Reset или вообще никакого (Neither). Включить библиотеку Prefix-Free; подключить внешнюю таблицу стилей CSS или же другой проект, указав в строке External CSS File or Another Pen абсолютный путь к этому файлу:
Кнопка Analyze CSS via CSS Lint служит для проверки CSS-кода в CodePen на синтаксические ошибки с помощью известного проекта CSS Lint (под редактор Sublime Text также есть подобный плагин). На рисунке “Основное окно CodePen” внимательный читатель может заметить ошибки, на которые обязательно “заругается” CSS Lint. В частности, )):
Основное окно CodePen
С настройками CodePen разобрались, теперь давайте вкратце рассмотрим основное окно в этом редакторе. Оно разбито на три части для написания кода на HTML, CSS и JavaScript. Внизу расположено окно предварительного просмотра. Не стоит даже упоминать, что можно легко изменить расположение и вид этих окон:
Вверху находятся четыре большие кнопки: Save, Fork, Info, Share. Кнопка Save — конечно же для сохранения проекта (Pen). Если имеются несохраненные изменения, то вверху этой кнопки появляется оранжевая полоска, как напоминание о необходимости сохранить изменения. Кстати, забыл упомянуть, что в CodePen проект называется Pen (</em>вот так незатейливо</em>). Кнопка Fork — для создания ответвления (fork) проекта. Кнопка Info — внести информацию о создаваемом Pen: его заголовок, описание и мета-теги:
Кнопка Share весьма и весьма полезна. С помощью нее можно поделиться созданным проектом (кодом) с другими людьми. Собственно, именно для этой цели сервис CodePen и создавался. Там же можно скачать проект в виде zip-архива или выложить его на GitHub. И даже отправить ссылку в виде SMS на указанный номер телефона:
На CodePen можно встраивать один проект (Pen) в другой проект (Pen). Более того, созданный Pen можно встраивать в виде готового куска кода в другие проекты (не обязательно созданные в CodePen), в том числе и под CMS WordPress. Это уже совсем круто!
Работаем с 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. Но я оставлю это в качестве “домашнего задания” для тех, кому это нужно.
Что такое БФФ
«Back-end for front-end» — сервис-прослойка между фронтом и бэком, который обращается к микросервисам и собирает из них данные в удобной . … Continue reading
Как пользоваться редактором кода 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
Есть возможность создавать приватные, закрытые от всех, кому их не нужно видеть пены. Для преподавателей доступен режим – Professor Mode. Студенты могут смотреть уроки в реальном времени и общаться в чате. PRO-аккаунт позволяет создавать проекты — Projects с файлами и папками и загружать в них свои файлы, изображения и шрифты, проводить кроссбраузерное тестирование.
Для начинающих верстальщиков и фронтендеров, бесплатного функционала вполне достаточно. Как видите, пользоваться сервисом Codepen, легко и приятно.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.