К постам Опубликовано: 2016-09-03

Codepen, заметки, горячие клавиши

Codepen является супер простым и популярным сайтом для написания кода здесь и сейчас . Если вы не знаете, что такое Codepen или не слышал об этом раньше, это в основном онлайн площадка для написания кода для трех мушкетеров frontend плана кодирования; HTML, CSS и JavaScript. Есть и другие подобные как JSFiddle, JS Бин, CSSDeck & Dabblet. Codepen, безусловно, один из наиболее хорошо известных среди разработчиков интерфейсов. Не мудрствуя лукаво, давайте прыгать прямо в некоторые основные и полезные советы по использованию Codepen.
  1. Кнопка Выполнить

    Codepen обновляет код в то время как вы печатаете, вы можете отказаться от опции "Auto Update Preview", и получить кнопку Run вместо этого. При нажатии на нее, вы сможете увидеть и обновить вывод вашего кода, когда вы хотите.
Это также отличный вариант, если вы работаете с кодом выход которого проходит через множество изменений макета и перерисовывает каждый раз, когда он обновляется, что приводит к медлительности. codepen-tip-show-run-btn-compressor

2. Число Инкримент / дикримент

Увеличение или уменьшение числа в коде в Codepen без ввода новых номеров. Все, что вам нужно сделать, это использовать комбинацию клавиш Ctrl из / CMD и стрелками вверх и вниз. codepen-tip-number-incdec-compressor

3. Множественные курсоры

Вы можете поместить курсоры в нескольких точках в исходном коде, а затем введите или редактируйте во всех этих точках одновременно. Это работает только если вы вводили ту же информацию, это также снижает необходимость копирования вставки. Просто удерживайте нажатой клавишу Ctrl / Cmd при щелчке на этих нескольких точках. codepen-tip-multiple-cursors-compressor

4. Различные Цветные консольные сообщения

Объект консоли JavaScript имеет несколько методов, кроме log(), чтобы позволить печатать вещи в веб-консоли. Вы можете использовать info(), warn() и error() методы для получения информации, предупреждений и ошибок. Как правило, веб-консоли цвет этих сообщений мудры, или будет отображаться соответствующий значок рядом с ними (как предупреждающий знак для предупреждающего сообщения) для более легкого распознавания. Codepen имеет свою собственную консоль, которую можно открыть, нажав на кнопку консоли в левом нижнем углу. Он идеально подходит для быстрой проверки консольных сообщений без необходимости открывать консоль браузера. Эта консоль отличает различные типы сообщений консоли с различными цвета фона. codepen-tip-colored-console-msgs-compressor

5. Экспорт

После сохранения, ручка (одна Codepen сущность) могут быть экспортированы в виде ZIP-файла со всеми его в HTML, CSS и JS код в файлах. Там также возможность сохранить перо в качестве сущности Github (репозитории Git). Вы можете найти кнопку Экспорт в правом нижнем углу каждого пера. codepen-export-compressor

6. Найти и заменить

Найти и заменить - существенная работа для людей, которые, как правило, чтобы переименовают имена переменных каждый раз сейчас и потом. Ctrl / Cmd + Shift + F является ключевым комбо, чтобы открыть "Найти и заменить" диалог.
codepen-tip-find-and-replace-compressor
7. Emmet Tab Trigger
Знаете ли вы о вкладке триггеры для кодирования Эммет? Эммет является инструментом повышения производительности для frontend разработчиков, что позволяет набирать скелет-код, который позже развертывается. Для этого в Codepen, просто быстро ввести соответствующую аббревиатуру в редакторе, нажмите клавишу Tab, а также полный код появляется сразу. Доступно только для HTML в Codepen.
codepen-tab-trigger-compressor

8. Получить код отдельных файлов

Если вы используете опцию экспорта, как уже упоминалось выше, вы получите все три файла (HTML, CSS и JS) вашего пера. Но если вы заинтересованы только в одном или двух из этих файлов, и вы хотите, чтобы загрузить их по отдельности, есть опция для этого тоже в Codepen.После входа в Codepen, перейдите к своим пером, и нажмите на кнопку Change View в правом верхнем углу. В нижней части раскрывающегося списка, вы увидите ссылки для скачивания прямые для отдельных файлов.codepen-export-indivudual-file-compressor

9. Проверьте переменные JavaScript

В консоли JavaScript Codepen соединяется с JavaScript, сохраненного пера, вы можете также использовать его, чтобы быстро протестировать JavaScript. Эта функция приходит особенно удобно в проверке переменных JS, так как таким образом вы не должны вставлять дополнительную консоль или предупредительные сообщения в исходный код исключительно для целей тестирования.
codepen-inspect-js-var-compressor

10. Включите Pen в шаблон

Если вы, начинаете большинство ваших ручек с тем же набором кода, вы можете использовать шаблон, чтобы сохранить эти повторяющегося кода. Чтобы включить ручку в шаблон, отметьте опцию Template в меню настроек. Когда вы позже создадите новую ручку, вы можете начать с сохраненного шаблона, нажав на стрелку вниз в правой части кнопки New Pen. Он откроет выпадающий список со всеми сохраненными шаблонов на выбор.
codepen-template-compressor