Penlab открыт

Penlab — песочница для фронтенда в браузере. Слева три панели с кодом, справа результат, под ним консоль. Ничего не надо ставить и собирать: открыли новый пен, написали пару строк — и они уже работают.

Мы делали его для трёх случаев: быстро проверить идею, показать пример ученику или коллеге, приложить живое демо к статье. Ниже — что в Penlab есть уже сейчас.

Редактор

Три панели — HTML, CSS и JavaScript — на CodeMirror 6: подсветка, автодополнение, сворачивание блоков, форматирование кода.

• Emmet в HTML и CSS. Наберите ul>li*3 и нажмите Tab — получите список из трёх пунктов. В CSS m10 превращается в margin: 10px;.
• Живое превью. Результат обновляется через полсекунды после того, как вы перестали печатать. Автозапуск можно выключить и запускать код вручную — Ctrl+Enter или ⌘Enter.
• Консоль под превью: console.log, предупреждения и ошибки из вашего кода. В неё же можно ввести выражение и сразу увидеть ответ.
• Раскладки. Редакторы слева, сверху или справа; панели меняют размер и сворачиваются.
• Настройки: тема кода, размер шрифта, перенос строк. Горячие клавиши работают и на русской раскладке.

Вот пен, которого хватит для первой пробы:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #0e0e0e;
  color: #fff;
  font: 600 48px/1 system-ui;
}

Код из пена выполняется в изолированной рамке: до вашего аккаунта и чужих пенов он не дотянется.

Аккаунт без пароля

Писать код можно и без регистрации. Аккаунт понадобится, когда захочется сохранить пен.

1. Нажмите Save и введите email.
2. Получите письмо с шестизначным кодом и введите его.
3. Выберите имя — и пен, над которым вы работали, сохранится сам.

Паролей нет: каждый раз вы входите по новому коду из письма.

Ссылки, форки и лайки

У сохранённого пена появляется свой адрес. По ссылке он открывается у любого человека, в том числе без аккаунта: с кодом, превью и консолью.

• Форк — своя копия любого пена, вашего или чужого. В копии остаётся пометка, с чего она сделана.
• Лайк — один на пен. Автор видит, сколько их набралось.
• Результат во весь экран — отдельная страница без редактора, удобно показывать на проекторе.

Если вы открыли один пен в двух вкладках и сохранили в обеих, Penlab не затрёт изменения молча: он спросит, перезаписать, сохранить копией или отменить.

Профиль и библиотека

В профиле лежат все ваши пены: сохранённые, форки и те, что вы лайкнули. Их можно искать по названию, смотреть сеткой с мини-превью или списком, переименовывать и удалять. Рядом — статистика: сколько у вас пенов, форков, лайков и просмотров.

У каждого автора есть публичная страница с описанием и его пенами. Чтобы попасть на неё, нажмите на имя автора в любой карточке.

Витрина

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

Телефон и язык

На телефоне редактор переключается вкладками: HTML, CSS, JS и результат. Интерфейс и письма — на русском и английском; язык выбирается по браузеру и меняется в настройках.

Это первая запись в блоге. Здесь мы будем коротко рассказывать, что нового появилось в Penlab. А пока — откройте редактор и попробуйте.