Вы когда-нибудь мечтали о веб-приложении или расширении, позволяющем создавать прототипы пользовательского интерфейса и делиться ими на лету?
Мы все делаем! У всех нас есть представления о том, как мы хотим, чтобы наши сайты или приложения выглядели и чувствовали себя.
Итак, вы придумали действительно отличный дизайн и не можете точно вспомнить, как вы это сделали?
Теперь вам нужно найти способ поделиться этим. Это может занять дни и даже недели, если вы пытаетесь поделиться довольно сложным дизайном.
Нет причин ждать создания прототипов веб-приложений. Создайте их сейчас с Dabblet.
Перетащите элементы, настройте стиль и сохраните его. Отправьте его дизайнеру на рассмотрение или просто скопируйте в презентацию. Возможности безграничны.
Что такое Дабблет?
. Баловаться, вы можете экспериментировать с небольшими фрагментами кода CSS и HTML в режиме реального времени.
При использовании этого вам не понадобятся префиксы в вашем коде CSS. Списки GitHub позволяют хранить ваш контент, публиковать его на других сайтах и делиться им с другими.
Это отличный способ поделиться фрагментами кода с другими разработчиками и получить отзывы.
Как это работает?
Как только код введен, поверх него сразу же появляется визуальный вывод. JavaScript является единственным исключением, учитывая, что запускать его при каждом нажатии клавиши было бы раздражающе, а в определенных ситуациях браузер даже мог бы стать непригодным для использования.
Использование параметра «Запустить JS» на вкладке JavaScript или сочетания клавиш (Ctrl + Enter или Cmd + Enter) запустит JavaScript при запуске Dabblet. Меню параметров позволяет изменить этот стиль.
Как разработчик, вы можете переключаться между кодированием на всех трех этих языках одновременно или просмотром готового продукта.
Особенности
Ниже приведены особенности Dabblet, о которых вы должны знать:
Быстрое редактирование CSS: Вы можете быстро добавлять, редактировать и удалять свойства CSS. Изменения будут отображаться на странице в режиме реального времени.
Подсветка синтаксиса: Код CSS и HTML имеет выделенный синтаксис, что упрощает его чтение и понимание. Код также будет проверяться при вводе. Вы также можете скрыть поле кода, если хотите.
Автозаполнение: Dabblet предлагает автозаполнение для свойств и значений CSS. Это может быть очень полезно при создании или редактировании таблиц стилей.
Готовые таблицы стилей CSS: Вы можете получить доступ к готовым таблицам стилей CSS с популярных веб-сайтов. Их можно использовать для быстрого и простого добавления стилей на ваш собственный веб-сайт.
Основная поддержка: Dabblet поддерживает GitHub Gists, что позволяет легко хранить фрагменты кода и делиться ими с другими.
Live Preview: Вы можете видеть результаты изменений вашего кода в режиме реального времени без перезагрузки страницы. Например, если вы измените цвет текста, вы увидите, как изменение отражается на тексте при вводе.
Горячие клавиши: В Dabblet есть сочетания клавиш для обычных задач, таких как добавление нового правила стиля или комментирование.
Несколько режимов просмотра: Dabblet предлагает несколько режимов просмотра, что позволяет вам видеть код и результаты рядом или друг над другом или под ним.
Плюсы
- Быстрый CSS
- Даже если вы вошли в систему, вы все равно можете сохранить инкогнито.
- Встроенные средства предварительного просмотра значений CSS для различных параметров, таких как углы, цвета, продолжительность и т. д.
- Все в формате XHR, поэтому страница никогда не обновляется, даже при сохранении.
- Сочетания клавиш в изобилии.
- Весь код автоматически форматируется (кроме уценки).
- Надежная документация с самого начала.
Минусы
- Поначалу интерфейс немного громоздкий, но к нему привыкаешь.
- Нет функций управления на уровне проекта (пока).
Интеграция с даблетами
Любая платформа нуждается в интеграции с другими сервисами, и Dabblet не исключение. Ниже приведены некоторые интеграции, которые предлагает Dabblet:
Google Analytics
Вы можете легко добавить свой код отслеживания Google Analytics на страницы Dabblet. Это позволит вам отслеживать просмотры страниц и другую статистику для вашего Dabblet.
Ubuntu
Dabblet можно использовать для создания тем Ubuntu. Вы можете создать новый Dabblet, добавить код CSS и HTML и предварительно просмотреть тему в веб-браузере.
DigitalOcean
Единственная в своем роде облачная хостинговая компания предоставляет предприятиям услуги облачных вычислений, позволяя им более эффективно развивать свою деятельность.
Что Dabblet делает с этим?
Теперь вы можете создавать, управлять и развертывать свои Dabblets на Пространства DigitalOcean.
Это позволяет вам хранить все ваши фрагменты кода в одном месте и упрощает обмен ими с другими.
Альтернативы Dabblets
Альтернативы всегда присутствуют, и в том же духе вот несколько, над которыми стоит задуматься, когда дело доходит до Dabblet:
Pastebin.com
Программисты обычно используют веб-сайт для сохранения исходного кода или фрагментов данных конфигурации. Однако любой желающий может поместить любой текст в отведенное место.
JS-бин
JS Bin — это бесплатный инструмент для тестирования JavaScript. Результатом можно поделиться через короткий URL-адрес после ввода Javascript в одной панели и HTML в другой. Воспользуйтесь меню, позволяющим выбрать одну из наиболее часто используемых библиотек JS.
CSSDeck
Этот инструмент отлично подходит для создания тестовых случаев и обмена ими с другими людьми, которые могут помочь вам в ваших усилиях по программированию. С различными опциями вы даже можете мгновенно сотрудничать в проектах с другими программистами.
Plunker
Plunker — это цифровая платформа, на которой веб-разработчики могут проводить мозговые штурмы, сотрудничать и делиться своими мыслями.
Например, вы можете начать с «Привет, мир!» программируйте на любом языке и добавляйте фрагменты кода, уценки и скриншоты, чтобы сделать процесс обучения более насыщенным.
Заключительное слово
В заключение, Dabblet — полезный инструмент для веб-разработчиков, особенно для тех, кто ищет способы быстро и легко проверить их код.
С ее различными функциями и интеграциями трудно не найти применение этой платформе.
Попробуйте сегодня!
Оставьте комментарий