10 Codepen Поради для початківців

Codepen - це дуже легкий і популярний сайт перо вниз робочий фронтальний код комбо зразу. Якщо ви не знаєте, що Codepen є або не чули про неї раніше, це в основному онлайн майданчик вихідного коду (назвемо це OSCP для звучання nerdier) для трьох мушкетерів фронтального кодування; HTML, CSS і JavaScript.

Є інші подібні OSCP, такі як JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen, безумовно, один з найвідоміших серед розробників. Без подальших сутичок, давайте стрибаємо прямо в деякі основні та корисні поради для використання Codepen.

1. Запустіть кнопку

Якщо ви не є шанувальником способу виведення вашого коду в Codepen продовжує оновлюватися час Ви можете друкувати відмовитися від “Попередній перегляд автоматичного оновлення” опції, і замість цього натисніть кнопку Виконати. Натиснувши її, ви зможете побачити та оновити вихідний код кожен раз.

Це також прекрасний варіант, якщо ви працюєте з кодом, вихід якого проходить багато змін у макетах, і перемальовує кожен раз, коли він оновлюється, що призводить до повільності.

2. Збільшення / зменшення кількості

Збільшуйте або зменшуйте числа в коді в Codepen без введення нових номерів. Все, що вам потрібно зробити, це використовувати комбінацію клавіш Ctrl / Cmd і Стрілки вгору і вниз.

3. Кілька курсорів

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

4. Різні кольорові повідомлення консолі

The Консоль Об'єкт JavaScript має ще кілька методів крім того журнал () щоб дозволити вам друк речей у веб-консолі.

Ви можете використовувати info (), попередити () і помилка () методи для інформації, увага і помилка. Зазвичай веб-консолі розмальовують ці повідомлення за типом або показують відповідну піктограму поруч із ними (наприклад, попереджувальний знак для попереджувального повідомлення) для легшого розпізнавання.

Codepen має власну консоль які можна відкрити, натиснувши кнопку "Консоль" у нижньому лівому куті. Він ідеально підходить для швидкої перевірки консольних повідомлень без необхідності відкривати консоль браузера. Ця консоль розрізняє різні типи консольних повідомлень з різними кольорами фону.

5. Експорт

Після збереження a перо (єдиний об'єкт коду) можна експортувати як файл ZIP з усіма його в HTML, CSS і JS код у файлах. Також є можливість зберегти ручку як суть Github (сховище 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. Поверніть ручку в шаблон

Якщо ви, як правило, починаєте більшість своїх ручок з той же набір коду, можна використовувати шаблон для зберегти ці повторювані коди. Перетворити ручку на шаблон, поставте галочку у пункті Шаблон в меню Налаштування. Коли ви пізніше створите нову ручку, ви можете почати з збереженого шаблону натисканням стрілки вниз у правій частині кнопки Нове перо. Він відкриє випадаючий список з усіма збереженими шаблонами на вибір.