Это часть серии: localpen – кодовые ручки, которые работают локально!
Localpen Это мощная командная площадка для кодирования Frontend, которая полностью работает на клиенте и может быть размещена на любом статическом файловом сервере. Попробуйте сейчас на localpen.io
Фон
Во время разработки файлов визуализации визуализации на основе D3 мне нужна детская площадка, которую я могу проводить на сайте документации библиотеки, где разработчики могут тестировать его, попробуйте разные параметры и сразу увидеть результат.
Было много хороших вариантов, но никто не отметила все коробки. Мне нужен редактор кода, который может быть встроен на моем веб-сайте, может быть префиден с моими образцами кода, позволяет конечным пользователям редактировать и сразу увидеть результат, автоматически завершен для моих типов типов в библиотеке, а также не стоит Большие деньги. Кроме того, веб-сайт моей документации производится статическим генератором сайта, который я буду проходить на статическом файловом сервере, поэтому мне нужна игровая площадка, чтобы полностью запустить клиенту.
Я прошу слишком много?
Здесь я представляю Localpen Отказ Проект, который я начал в качестве небольшого модуля, который должен быть добавлен на сайт, но на самом деле вырос намного больше и заслуживает отдельного проекта.
Это совпало с началом хакатона Platform Platform DigitalCean App, которая мотивировала меня, чтобы усердно работать, чтобы сделать продукт, готовый к крайнему сроку. Итак, вот моя подача, всего за несколько часов до крайнего срока:)
Hatemhosny/localpen
Код ручки, которые работают локально!
Основные характеристики:
- Монако редактор (Редактор красивых кодов, которые способны VS код )
- Красивее Форматирование кода
- Поддерживает многие языки (HTML, Markdown, Pug, Asciidoc, CSS, SCSS, SASS, меньше, Stylus, JavaScript, Teamescript, JSX, CoffeeScript и другие, чтобы прийти)
- Эммет Завершение вкладки
- Autoprefixer.
- Все компиляция/транспортировки кода происходит на лету на клиенте, поэтому работает на любом статическом сервере.
- Немедленные результаты без серверов
- Условная нагрузка модулей (только используемые функции загружены)
- Позволяет добавлять внешние таблицы стилей и/или скриптов
- Позволяет импортировать NPM модули для использования непосредственно без шага сборки (используя отличный Skypack.dev Несомненно
- Импортирует сильно напечатанные локальные типографские модули с полным завершением кода и Intellisense.
- Может быть встроена в обычные веб-страницы
- Код встраивает разрешение редактирования с немедленным предварительным просмотром
- Резюзные расщепленные панели (используя Split.js )
- Несколько режимов: полный режим (с разделенными панелями), режим только редактора и режим блока кода только для чтения
- Импорт кода из GitHub и Gitlab (Gists и REPOS) или с ваших веб-страниц
- Немедленны признают и импортирует кодовые работы, экспортированные в Github Gists
- Экспортные/импортные проекты как JSON
- Экспорт исходного кода как zip-файл или готовый к запуска скомпилированной HTML-страницы
- Экспорт в кодепен и jsfiddle (больше, чтобы прийти)
- Сохранить/открыть из локального хранения с дополнительным автосохранением
- Горячие клавиши
- Localpen находится под активным развитием с большим количеством функций.
В следующем посте я представляю дизайнерские решения и то, что делает Localpen другой.
Оригинал: “https://dev.to/hatemhosny/introducing-localpen-2keb”