10 советов по Codepen для начинающих

Codepen - супер легкий и популярный сайт ручка вниз рабочий рабочий кодовый комбо сразу. Если вы не знаете, что такое Codepen или не слышали об этом раньше, это в основном онлайн площадка с исходным кодом (давайте назовем это ОСЦП звучать бестолково) для трех мушкетеров фронтального кодирования; HTML, CSS а также JavaScript.

Существуют и другие подобные OSCP, такие как JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen, безусловно, является одним из самых известных разработчиков. Без дальнейших церемоний, давайте прыгнем прямо в некоторые основные и полезные советы за использование Codepen.

1. Кнопка запуска

Если вы не фанат того, как выводится ваш код в Codepen, он постоянно обновляется в то время как вы печатаете, вы можете отказаться от “Предварительный просмотр автообновления” вариант, и получите вместо этого кнопку Run. Когда вы щелкните по нему, вы сможете увидеть и обновить вывод вашего кода всякий раз, когда вы хотите.

Это также отличный вариант, если вы работаете с кодом, вывод которого проходит много изменений макета, и перерисовывает каждый раз, когда он обновляется, что приводит к замедлению.

2. Увеличение числа / уменьшение

Увеличьте или уменьшите числа в вашем коде в Codepen без ввода новых номеров. Все, что вам нужно сделать, это использовать комбинацию клавиш Ctrl / Cmd а также Стрелки вверх и вниз.

3. Несколько курсоров

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

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

Приставка JavaScript объект имеет еще несколько методов Кроме того журнал() чтобы позволить вам печатать вещи в веб-консоли.

Вы можете использовать Информация(), предупредить () а также ошибка() методы для Информация, предупреждение а также ошибка. Как правило, веб-консоли окрашивают эти сообщения по типу или рядом с ними отображается соответствующий значок (например, предупреждающий знак для предупреждающего сообщения). для облегчения распознавания.

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

5. Экспорт

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

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

Найти и заменить - необходимая операция для людей, которые время от времени переименовывают свои имена переменных. Ctrl / Cmd + Shift + F - это комбинация клавиш для Открой “Найти и заменить” диалог.

7. Emmet Tab Trigger

Знаете ли вы о триггерах табуляции для кодирования Emmet? Emmet - это продуктивный инструмент для разработчиков, который позволяет вам введите код скелета, который позже будет расширен. Чтобы сделать это в Codepen, просто быстро наберите в редакторе соответствующую аббревиатуру, нажмите клавишу Tab, и сразу появится полный код. Доступно только для HTML в Codepen.

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

Если вы используете опцию экспорта, как упоминалось ранее, вы получите все три файла (HTML, CSS и JS) вашего пера. Но если вы заинтересованы в только один или два из этих файлов, и хотите скачать их по отдельности, есть возможность для этого тоже в Codepen.

После входа в Codepen перейдите к своей ручке и нажмите кнопку «Изменить вид» в верхнем правом углу. В нижней части раскрывающегося списка вы увидите прямые ссылки на скачивание отдельных файлов.

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

Когда консоль JavaScript Codepen подключается к JavaScript, сохраненному в вашем пере, вы также можете использовать его для быстрого тестирования JavaScript. Эта функция особенно полезна в проверка переменных JS, как ты так не нужно вставлять дополнительную консоль или предупреждающие сообщения в исходный код исключительно для целей тестирования.

10. Поверните перо к шаблону

Если вы склонны начинать большинство своих ручек с тот же набор кода, Вы можете использовать шаблон для сохранить эти повторяющиеся коды. Превратить ручку в шаблон, отметьте опцию Шаблон под меню настроек. Когда вы позже создадите новую ручку, вы можете начать с сохраненного шаблона нажав стрелку вниз в правой части кнопки «Новое перо». Откроется выпадающий список со всеми сохраненными шаблонами на выбор..