CodePen.io описують себе як "майданчик для front-end частини веб-сторінки." CodePen відмінно підходить для тестування багів, співпраці та отримання натхнення від представлених робіт. Він працює, дозволяючи створити "pen" \- набір HTML, CSS і JavaScript. Потім Ви можете додавати ці набори до Вашого профілю, отримувати відгуки і мати можливість продовжити редагування в будь-який час.
Як і більшість подібних ресурсів, CodePen дозволяє Вам опрацьовувати інформацію в open-source-середовищі, маючи можливість в реальному часі візуально відслідковувати зміни в коді і навіть дозволяючи вбудовувати демо CodePen в будь-яку веб-сторінцу.
Ця стаття про функції CodePen, які допомагають цьому інструменту бути поза конкуренцією.
1)CSS налаштування
CodePen має багато гарних функцій, які допомагають писати CSS швидше. Можна включити Normalize.css або Reset.css в CSS, просто натиснувши відповідну кнопку. Також є можливість використовувати -prefix- free або Autoprefixer. Таким чином, немає необхідності витрачати час, щоб виконати посилання на зовнішній файл (хоча це можливо за бажанням).
Що, якщо Ви не впевнені на рахунок правильності CSS? CodePen має інтеграцію з CSSLint, інструментом, який виконує перевірку Вашого CSS коду. Він попередить, якщо є помилки, попередження, погана підтримка браузерів та ін.
2)HTML, CSS та JavaScript
Ви можете використовувати HAML, Markdown, Slim, або навіть Jade для HTML. Sass і SCSS (з додатковими Compass або Bourbon add-on), а також Less і Stylus підтримуються для CSS.
В меню JavaScript, ви можете вибрати CoffeeScript або LiveScript. Також є меню, що випадає, де ви можете мати вибрати останню версію JQuery або AngularJS.
3)Emmet і Vim
Ці інструменти прив'язування допоможуть прискорити робочий процес.
4)Колекції і теги
Ви можете додавати теги до Ваших наборів, які потім стають доступними для пошуку.
Також Ви можете об'єднувати набори в колекції за певною тематикою.
5)Режими перегляду
CodePen має різні режими перегляду наборів. Кожен вид має свої переваги.
-
Редакторський режим \- стандартний режим. Ви можете налаштувати розмір переглядача коду і вибрати потрібну мову для відображення.
-
Детальний режим \- цей режим дозволяє Вам бачити теги, коментарі та ін. Цей вигляд містить більшу частину соціальних функцій CodePen.
-
Повноекранний режим \- цей режим розширює переглядач на повний екран за допомогою iframe, залишивши тільки футер CodePen.
-
Debug режим \- той же повноекранний режим, але з додатковими функціями. Зникає iframe і футер CodePen для полегшення доступу до JS консолі. Це зручно для тестування коду.
6)Режими перегляду CodePen Pro
Якщо ви CodePen Pro користувач, то Ви маєте доступ к додатковим режимам перегляду:
-
Режим презентації \- цей режим зроблений спеціально для проекторів. Він видаляє хедер, щоб дати Вам більше можливостей і дозволяє швидко змінювати розмір шрифту і колір редактора коду. Ви також можете змінити розмір переглядача без зміни коду.
-
Режим "живого" перегляду \- повноекранний режим. Якщо, знаходячись в цьому режимі, Ви щось змінили - все автоматично оновиться. Цей режим часто використовується при тестуванні на кількох пристроях.
-
_Професорський режим _\- режим відображення коду в реальному часі, також є вікно чату, щоб, наприклад, студенти могли задавати питання вчителю.
-
Режим співпраці** **\- режим, в якому правки в коді може виконувати більш ніж один користувач. Також є вікно чату.
7)Ведення блогу
Це нова функція CodePen, Ви можете описувати код, ведучи звичайний блог.
Ви можете робити помітки, а також вставляти демо CodePen в свій запис. Ви
можете додавати "кастомний" CSS до Вашого посту і виконувати попередній
перегляд, щоб перевірити пост.
8)Спільнота
Спілкування - важлива частина CodePen. Оцінюючи та отримуючи критику можна знайти помилки та навчитись чомусь новому.
9)Джерело натхнення
Продивившись роботи інших розробників, можна дізнатись багато нового та цікавого.
Ще немає коментарів