Содержание
Начало работы с веб-разработкой на JavaScript может быть разочаровывающим процессом, но существуют инструменты, облегчающие его.
CodePen.io — это среда кодирования в браузере, предназначенная как для обучения написанию кода, так и для быстрого прототипирования идей с минимальными трудностями.
В этой статье мы рассмотрим некоторые функции сайта и то, как они могут помочь вам стать лучшим программистом.
Что такое CodePen?
CodePen предоставляет то, что называется ручка, который содержит три разных окна для HTML, CSS и JavaScript, а также панель предварительного просмотра, которая обновляется в режиме реального времени по мере ввода текста.
Хотя он часто используется веб-разработчиками для демонстрации идей для веб-сайтов, он также является отличным местом для изучения основ интерфейсной веб-разработки. Вот наиболее заметные функции, которые вам необходимо знать при использовании CodePen.
1. Препроцессоры
Препроцессоры — это интерпретируемые или скомпилированные языки, предназначенные для упрощения кодирования. Они могут добавлять функции в язык для удобства и облегчают чтение кода. В веб-разработке комбинация препроцессоров для HTML, CSS и JavaScript используется для быстрого создания чистого кода.
Если вы изучаете веб-разработку и хотите попробовать разные препроцессоры, CodePen позволяет вам переключать препроцессоры на лету и видеть код, который он компилирует, в режиме реального времени. Каждая из трех панелей в приложении CodePen имеет раскрывающееся меню в правом верхнем углу. Выбрать Посмотреть скомпилированный HTML / CSS / JS чтобы увидеть, как код будет интерпретирован.
В этой ручке мы создали простой сайт, используя Haml а также пререкаться стилизовать некоторый текст заголовка. выбирающий Посмотреть скомпилированный показывает стандартные HTML и CSS. В этом примере разница минимальна. Однако при изучении нового языка может быть полезно посмотреть, как выглядит предварительно обработанный код после компиляции.
2. Внешние ресурсы
Наряду с собственной поддержкой препроцессоров, CodePen поддерживает внешние скрипты. Это делает его идеальным местом для получения практического опыта работы с библиотеками для ваших личных проектов или для изучения популярных библиотек веб-приложений, таких как React.
,
Чтобы добавить внешнюю библиотеку, откройте настройки панель на вашей ручке и перейдите на вкладку JavaScript. Существует два способа добавления ресурсов: добавление URL-адреса ресурса вручную или поиск.
Мы использовали эту функцию в нашей статье, посвященной веб-анимации с mo.js, а также предварительной обработке Babel.
Смотрите пример Pen Mojs MUO Яна (@Bardoctorus) на CodePen.
Да, ручки CodePen могут быть встроены! Идите вперед и нажмите на панель предварительного просмотра выше, чтобы увидеть результаты урока Mo.js!
Другие ручки могут быть импортированы так же, как внешние библиотеки. Это означает, что вы можете использовать элементы из ранее написанных перьев, чтобы использовать их как модули в новых перьях. Пользователь CodePen Ручка Adam Simple Poll — хороший тому пример.
3. Шаблоны
Когда вы изучаете новые концепции или тестируете новые идеи, вы часто используете похожие компоненты и заново читаете одни и те же шаги. CodePen позволяет создавать перья шаблонов, которые могут исключить повторение, и позволяют сразу перейти к сути.
Чтобы создать шаблон, откройте новое перо, внесите изменения и выберите шаблон ползунок в меню настроек.
До недавнего времени бесплатные пользователи могли создавать только три шаблона, но теперь все пользователи могут иметь столько шаблонов в своей учетной записи, сколько они хотят. Идеально подходит для начала новой идеи с минимальной задержкой!
4. Режим совместной работы
Способность сотрудничать и преподавать с CodePen может быть его большим преимуществом. Уже есть множество отличных инструментов для совместной работы программистов, но подход CodePen прост и интуитивно понятен.
Профессиональные пользователи CodePen могут создать новое перо и открыть его для совместной работы под Сменить вид меню. Это превращает ссылку пера в совместное приглашение, рассчитанное на большое количество людей, в зависимости от вашего плана CodePen Pro.
В этом случае я писал HTML, пока друг обновлял CSS в режиме реального времени, с помеченным курсором, идентифицирующим, где они работают.
Любой, у кого есть ссылка, может присоединиться и использовать функцию чата в браузере, независимо от того, являются ли они профессиональными пользователями или даже имеют учетную запись CodePen. При условии, что автосохранение отключено, только владелец ручки может сохранять любые изменения, что делает его безопасным способом открыть свой код для других без риска.
Открытый характер этого режима полезен для начинающих, так как вы можете пригласить в перо практически любого, чтобы он помог вам в решении сложной задачи. Это также удобный способ узнать свой путь, так как он идеально подходит для проведения собеседований с потенциальными сотрудниками и уже профессионально использовался таким образом!
5. Профессор Мод
Режим «Профессор» позволяет одному пользователю Pro вести комнату, в которой только он может редактировать код. От 10 до 100 пользователей могут смотреть и общаться в зависимости от Pro плана хоста.
Режим «Профессор» обеспечивает гибкость между учебой в классе и дистанционным обучением или сочетанием двух. Использование режима «Профессор» позволит тем, кто находится в конце класса, иметь такой же опыт, как и людям, находящимся в начале, и учителю показывать исправления, которые будут обновляться в режиме реального времени.
6. Режим презентации
Неудивительно, что режим презентации разработан с учетом представления кода. Приложение отображается в упрощенном виде, предназначенном для работы с оверхед-проекторами. CodePen оптимизировал режим презентации для использования на низкоскоростных интернет-соединениях и более слабом оборудовании.
Проницательные читатели, возможно, уже поняли, что бесплатная версия CodePen обеспечит именно эту функцию, хотя в режиме Pro есть несколько полезных функций. Макет, размер шрифта и темы могут быть быстро изменены на лету, чтобы соответствовать практически любым настройкам, а при отображении ссылки на перо появляется сокращенный URL-адрес большого размера, облегчающий совместное использование проекта.
Эти небольшие изменения, а также возможность масштабирования окна предварительного просмотра в соответствии с тем, что вы демонстрируете, делают режим презентации идеальным как для преподавателей, так и для разработчиков, представляющих идеи коллегам. Режим презентации — это также чистый и простой способ представления кода, если вы берете интервью на позицию программиста
,
7. Шаблоны
Поиск вдохновения стал намного проще с коллекциями шаблонов проектирования CodePen.
Каждая категория представляет собой набор примеров кода, предоставляемых пользователями CodePen для конкретных задач. Вы ищете способ создания динамических кнопок для вашего сайта? Аккордеонные меню? Существует множество категорий, подходящих практически для любого примера.
Эти шаблоны также являются отличным способом узнать, как работают интерактивные кнопки, и различными способами работы динамических пользовательских интерфейсов.
8. Эммет
Emmet, ранее известный как Zen Coding, широко рассматривается как лучшая экономия времени для разработки HTML и CSS. Плагин берет часть кода, который вы часто пишете, и преобразует их в простые ярлыки.
Видеть это в действии лучше, чем объяснять, поэтому возьмите обычную настройку для документа HTML:
Добавление этого к каждому документу HTML было сокращено до двух действий. Используя Emmet, введите ! и ударил табуляция ключ. Магия!
Emmet в качестве стандарта активен в CodePen и особенно полезен, если вы пытаетесь изучить новую концепцию в JavaScript и хотите быстро создать поддерживающий HTML и CSS.
Разработка с CodePen для лучшего опыта
CodePen — отличный инструмент для веб-разработчиков, и эта область постоянно расширяется. JavaScript — отличный язык для изучения в будущем в веб-разработке.
Есть несколько отличных учебных пособий и курсов для людей, желающих начать работу с JavaScript.
и CodePen — отличная среда для проверки ваших новых навыков.
