Блог Penlab
Статьи о фронтенде и заметки о том, что изменилось в Penlab. Новые сверху.
-
Обновление
Код на телефоне: панель символов над клавиатурой
На телефоне над клавиатурой появилась панель: отмена, повтор, Tab и символы для HTML, CSS и JS. CSS сам ставит двоеточие и точку с запятой, JS подсказывает querySelector и короткие заготовки.
-
Обновление
Лишние блоки редактора теперь можно выключить
В меню раскладки появились переключатели блоков: HTML, CSS, JS, Результат и Консоль. Можно оставить, например, только JS и консоль — и набор сохранится вместе с пеном.
-
Статья
Как сделать модальное окно на HTML, CSS и JS: элемент dialog
Модальное окно собирается на элементе dialog: браузер сам затемняет страницу, удерживает фокус и закрывает окно по Esc. Показываем код, вариант без JavaScript и поддержку браузеров.
-
Статья
Плавное появление блока в CSS: как анимировать display: none
Блок с display: none можно показать и скрыть плавно средствами CSS. Разбираем @starting-style и allow-discrete на рабочих примерах и смотрим, что с поддержкой в браузерах.
-
Статья
Как сделать аккордеон на HTML и CSS без JavaScript: элемент details
Аккордеон собирается на элементе details: пункты раскрывает браузер, а атрибут name оставляет открытым один. Показываем код, свою стрелку, плавное раскрытие на CSS и поддержку браузеров.
-
Обновление
На какую почту можно завести аккаунт
Новый аккаунт в Penlab теперь заводится на адрес известного почтового сервиса: Яндекс, Mail.ru, Gmail и других. Рассказываем, зачем это понадобилось и кого касается.
-
Обновление
Выбор редакции: пены, которые мы отбираем вручную
На главной теперь не шесть самых залайканных пенов, а случайные шесть из тех, что отобрала редакция. На витрине у них отдельный фильтр и метка на карточке.
-
Обновление
Палитра в CSS, размер консоли и другие правки редактора
Цвета в CSS теперь видно прямо в коде и можно менять в палитре. Ещё три правки поменьше: размер текста консоли, чужой пен без кнопки «Сохранить» и возврат на нужную страницу после входа.
-
Обновление
Поделиться пеном и встроить его на свой сайт
В редакторе появилась кнопка «Поделиться»: ссылка на пен и код для вставки на любую страницу. Встроенный пен остаётся живым — код в нём можно править и запускать.
-
Обновление
Penlab открыт
Песочница для фронтенда в браузере: три панели с кодом, живое превью и консоль. Рассказываем, что Penlab умеет уже сейчас.
1–10 из 10