Home-theater-designers
Начало работы с веб-разработкой на JavaScript может быть утомительным процессом, но есть инструменты, которые облегчают его.
CodePen.io - это среда программирования в браузере, предназначенная как для обучения программированию, так и для быстрого прототипирования идей с минимальными усилиями.
В этой статье мы рассмотрим некоторые функции сайта и то, как они могут помочь вам стать лучшим программистом.
Что такое CodePen?
CodePen предоставляет нечто, называемое ручка , который включает три разных окна для HTML, CSS и JavaScript, а также панель предварительного просмотра, которая обновляется в режиме реального времени по мере ввода.
Хотя он часто используется веб-разработчиками для демонстрации идей для веб-сайтов, он также является отличным местом для изучения основ интерфейсной веб-разработки. Вот наиболее важные функции, которые вам нужно знать при использовании CodePen.
1. Препроцессоры
Препроцессоры - это интерпретируемые или компилируемые языки, предназначенные для упрощения кодирования. Они могут добавлять функции в язык для удобства и упрощать чтение кода. В веб-разработке для быстрого создания чистого кода используется комбинация препроцессоров для HTML, CSS и JavaScript.
Если вы изучаете веб-разработку и хотите опробовать различные препроцессоры, CodePen позволяет вам переключать препроцессоры на лету и видеть код, который он компилирует, в режиме реального времени. Каждая из трех панелей в приложении CodePen имеет раскрывающееся меню в правом верхнем углу. Выбирать Просмотр скомпилированного HTML / CSS / JS чтобы увидеть, как будет интерпретироваться код.
В этой ручке мы создали простой сайт, используя Haml а также Sass для стилизации текста заголовка. Выбор Посмотреть скомпилированный показывает стандартный HTML и CSS. В этом примере разница минимальна. Однако при изучении нового языка может быть полезно посмотреть, как выглядит предварительно обработанный код после компиляции.
2. Внешние ресурсы
Помимо встроенной поддержки препроцессоров, CodePen поддерживает внешние скрипты. Это делает его идеальным местом для практического опыта работы с библиотеками для ваших личных проектов или для ознакомления с популярными библиотеками веб-приложений, такими как React.
Чтобы добавить внешнюю библиотеку, откройте Настройки на ручке и перейдите на вкладку JavaScript. Есть два способа добавить ресурсы: вручную добавить URL-адрес ресурса или выполнить поиск.
Мы использовали эту функцию в нашей статье, посвященной веб-анимация с mo.js вместе с предварительной обработкой Babel.
См. Перо Пример Mojs MUO Автор: Ян ( @Bardoctorus ) на CodePen.
Да, ручки CodePen можно встроить! Идите вперед и нажмите на панель предварительного просмотра выше, чтобы увидеть результаты учебника Mo.js!
Другие перья можно импортировать так же, как внешние библиотеки. Это означает, что вы можете брать элементы из ранее написанных перьев, чтобы использовать аналогичные модули в своих новых перьях. Пользователь CodePen Adam's Простой опрос ручка - хороший тому пример.
3. Шаблоны
Когда вы изучаете новые концепции или тестируете новые идеи, вы часто используете похожие компоненты и повторяете одни и те же шаги, чтобы начать работу. CodePen позволяет создавать перья-шаблоны, которые могут вырезать повторы и позволяют сразу перейти к делу.
Чтобы создать шаблон, откройте новое перо, внесите изменения и выберите Шаблон ползунок в меню настроек.
https://vimeo.com/221428690
До недавнего времени бесплатные пользователи могли создавать только три шаблона, но теперь у всех пользователей может быть столько шаблонов в своей учетной записи, сколько они хотят. Идеально подходит для начала работы над новой идеей с минимальной задержкой!
4. Сотрудничество в сфере моды
Возможность сотрудничать и обучать с помощью CodePen может быть его самым большим преимуществом. Для программистов уже существует множество отличных инструментов для совместной работы, но подход CodePen прост и интуитивно понятен.
Профессиональные пользователи CodePen могут создать новое перо и открыть его для совместной работы в Сменить вид меню. При этом ссылка на ручку превращается в приглашение, которым можно поделиться, в зависимости от вашего плана CodePen Pro.
использовать ноутбук как монитор
В этом случае я написал HTML, пока друг обновлял CSS в реальном времени, с помеченным курсором, указавшим, где они работали.
Любой, у кого есть ссылка, может присоединиться и использовать функцию чата в браузере, независимо от того, является ли он профессиональным пользователем или даже имеет учетную запись CodePen. Если автосохранение отключено, только владелец пера может сохранять любые изменения, что делает его безопасным способом без риска открывать ваш код для других.
Открытый характер этого режима полезен для новичков, так как вы можете пригласить за ручку практически любого, чтобы он помог вам разобраться в сложной концепции. Это также удобный режим, чтобы ориентироваться, поскольку он идеально подходит для собеседований с потенциальными сотрудниками и уже использовались профессионально таким образом !
5. Профессор Моде
Режим профессора позволяет одному пользователю Pro разместить комнату, в которой только он может редактировать код. От 10 до 100 пользователей могут смотреть видео и общаться в чате в зависимости от тарифного плана Pro хоста.
Режим профессора обеспечивает гибкость между обучением в классе и дистанционным обучением или их комбинацией. Использование режима профессора позволит людям, находящимся в конце класса, получить тот же опыт, что и те, кто находится впереди, а учитель сможет показывать исправления, которые будут обновляться в режиме реального времени.
6. Режим презентации
Неудивительно, что режим презентации разработан с учетом кода представления. Приложение отображается в упрощенном виде, предназначенном для работы с диапроекторами. CodePen оптимизировал режим презентации для использования при подключении к Интернету с более низкой скоростью и более слабом оборудовании.
Проницательные читатели, возможно, уже поняли, что бесплатная версия CodePen предоставит именно эту функцию, хотя в режиме Pro есть несколько полезных функций. Макет, размер шрифта и темы можно быстро изменить на лету в соответствии с практически любыми настройками, а при отображении ссылки на перо отображается сокращенный URL-адрес большого размера, что упрощает совместное использование проекта.
Эти небольшие изменения, а также возможность масштабировать окно предварительного просмотра в соответствии с тем, что вы демонстрируете, делают режим презентации идеальным как для учителей, так и для разработчиков, представляющих идеи коллегам. Режим презентации - это также простой и понятный способ представить код, если вы проходите собеседование на должность программиста.
7. Выкройки
Поиск вдохновения стал намного проще с коллекциями CodePen Шаблоны проектирования .
Каждая категория представляет собой набор примеров кода, предоставленных пользователями CodePen для конкретных задач. Вы ищете способ создания динамических кнопок для своего сайта? Аккордеонное меню? Существует множество категорий, подходящих практически для любого примера.
Эти шаблоны также являются отличным способом узнать, как работают интерактивные кнопки, и различные способы функционирования динамических пользовательских интерфейсов.
8. Эммет
Эммет , ранее известный как Zen Coding, широко считается самым эффективным средством экономии времени при разработке HTML и CSS. Плагин берет часть кода, который вы часто пишете, и преобразует их в простые ярлыки.
Лучше увидеть это в действии, чем объяснять, поэтому воспользуйтесь обычными настройками для HTML-документа:
Добавление этого в каждый HTML-документ сократилось до двух действий. Используя Эммета, введите ! и ударил Вкладка ключ. Магия!
Emmet активен в стандартной комплектации CodePen и особенно полезен, если вы пытаетесь изучить новую концепцию в JavaScript и вам нужно быстро создать поддерживающий HTML и CSS.
Разрабатывайте с CodePen для лучшего опыта
CodePen - отличный инструмент для веб-разработчиков, и область его применения постоянно растет. JavaScript - отличный язык для изучения будущего в веб-разработке.
как исправить отсутствие защиты в Интернете
Есть несколько отличных руководств и курсов для людей, желающих начать работу с JavaScript, а CodePen - отличная среда для проверки ваших новых навыков.
Делиться Делиться Твитнуть Эл. адрес 8 лучших сайтов для бесплатной загрузки аудиокнигАудиокниги - отличный источник развлечения, и их гораздо легче усвоить. Вот восемь лучших веб-сайтов, где вы можете скачать их бесплатно.
Читать далее Похожие темы- Программирование
- HTML
- Веб-разработка
- JavaScript
- CSS
Ян Бакли - независимый журналист, музыкант, исполнитель и видеопродюсер, живущий в Берлине, Германия. Когда он не пишет или на сцене, он возится с электроникой или кодом своими руками в надежде стать безумным ученым.
Ещё от Ian BuckleyПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться