Руководство по использованию CodePen: помогите нам, и мы поможем вам
Привет, всем! Я решил написать небольшое руководство по использованию сервиса CodePen. Постоянно приходится иметь дело с множеством постов, включающих код скриптов, либо вообще со ссылками на другие сайты. В этом случае, крайне неудобно оказывать помощь по таким вопросам.
Использование CodePen с целью рассказать о своей проблеме это наиболее оптимальный способ, потому что можно непосредственно запустить код и оперативно исправить его. С помощью этого прекрасного сервиса, мы можем поделиться своим кодом, а другие смогут его отредактировать и сделать свою версию, чтобы показать правильный вариант.
Что ж, начнем!
Для начала проследуйте на сайт сервиса CodePen (http://codepen.io).
На главной странице вы можете просмотреть различные красочные примеры, но нас интересует кнопка «Новый Pen» (New Pen) - все проекты в сервисе называются Pen.
Затем вы увидите пустой Pen, в который можно набрать свой код. Вы можете полностью скопировать и вставить в Pen содержимое HTML/CSS/Javascript, либо, что еще лучше, поместить именно тот проблемный код, который вызывает у вас сложности. К примеру, скопировать только реализацию навигационных элементов и код, относящийся к ней, то есть только то, с чем у вас возникают проблемы.
**Убедитесь, что вы верно проставили ссылки на все ресурсы, такие как изображения - они должны быть абсолютными, то есть содержать полную ссылку на ресурс, а не относительными.**
Вы можете провести индивидуальную настройку для каждого типа кода, просто нажав на значок шестеренки вверху.
Для секции CSS, вы можете использовать, например, связку Sass/Compass (это связка CSS-препроцессора и компилятора для перевода .sass файлов в обычные .css), чтобы получить в своё распоряжение дополнительные инструменты.
Аналогично, для окна JavaScript, вы можете произвести собственные настройки, например, сослаться на внешний JS-файл или другой Pen.
Что касается окна JavaScript, то вы, скорее всего, будете использовать библиотеки наподобие jQuery. Поэтому в настройках окна JS вам надо выбрать соответствующую библиотеку в списке Library.
Когда ваш Pen готов для публикации, нажмите кнопку «Save» в левом верхнем углу страницы, чтобы сохранить его.
Затем нажмите кнопку «Share» чтобы поделиться своим кодом с другими. Если у вас PRO-аккаунт, то вы имеете более гибкие возможности. Если вы анонимный пользователь, то у вас есть возможность использовать функцию «Full Page» – то есть, даже не регистрируясь, вы можете поделиться с другими своим Pen`ом, вместо простой передачи исходников.
