Искали ли сте някога да има уеб приложение или разширение, което ви позволява да създавате и споделяте прототипи на потребителския интерфейс в движение?
Всички го правим! Всички имаме идеи как искаме да изглеждат и се чувстват нашите сайтове или приложения.
И така, измислихте наистина страхотен дизайн и не можете да си спомните точно как го направихте?
Сега трябва да намерите начин да го споделите. Това може да отнеме дни, дори седмици, ако се опитвате да споделите доста сложен дизайн.
Няма причина да чакате, за да направите прототипи на вашите уеб приложения. Създайте ги сега с Dabblet.
Плъзнете и пуснете елементи, стилизирайте и ги запазете. Изпратете го на дизайнер за преглед или просто го копирайте в презентация. Възможностите са безкрайни.
Какво е Dabblet?
Използването на поглъщам, можете да експериментирате с малки фрагменти от CSS и HTML код в реално време.
Няма да имате нужда от никакви префикси във вашия CSS код, когато използвате това. GitHub gists ви позволява да съхранявате вашето съдържание, да го публикувате на други сайтове и да го споделяте с други.
Това е чудесен начин да споделяте фрагменти от код с други разработчици и да получавате обратна връзка.
Как действа?
Веднага след като кодът бъде въведен, визуалният изход се вижда незабавно върху него. JavaScript е единственото изключение, като се има предвид, че би било дразнещо да го стартирате при всяко натискане на клавиш и дори може да причини браузърът да стане неизползваем в определени ситуации.
Използването на опцията „Изпълни JS“ в раздела JavaScript или клавишната комбинация (Ctrl + Enter или Cmd + Enter) ще стартира JavaScript, когато се изпълнява Dabblet. Менюто с опции ви позволява да промените този стил.
Като разработчик можете да превключвате между кодиране и на трите езика едновременно или да видите готовия продукт.
Характеристики:
Следват характеристиките на Dabblet, за които трябва да знаете:
Бързо редактиране на CSS: Можете бързо да добавяте, редактирате и премахвате CSS свойства. Промените ще бъдат отразени на страницата в реално време.
Подчертаване на синтаксиса: CSS и HTML кодът са подчертани по синтаксис, което го прави лесен за четене и разбиране. Кодът също ще бъде валидиран, докато пишете. Можете също да изберете да скриете полето с код, ако предпочитате.
Автоматично довършване: Dabblet предлага автоматично довършване за CSS свойства и стойности. Това може да бъде много полезно, когато създавате или редактирате таблици със стилове.
Предварително изградени CSS стилове: Можете да получите достъп до предварително изградени CSS стилове от популярни уебсайтове. Те могат да се използват за бързо и лесно добавяне на стилове към вашия собствен уебсайт.
Основна поддръжка: Dabblet поддържа GitHub Gists, което ви позволява лесно да съхранявате и споделяте вашите кодови фрагменти с други.
Предварителен оглед на живо: Можете да видите резултатите от промените в кода си в реално време, без да презареждате страницата. Например, ако промените цвета на текст, ще видите промяната, отразена върху текста, докато пишете.
Комбинация от клавиши: Dabblet има клавишни комбинации за често срещани задачи, като добавяне на ново правило за стил или коментиране.
Множество режими на изглед: Dabblet предлага множество режими на изглед, което ви позволява да виждате кода и резултатите един до друг или над и под един друг.
Професионалисти
- Бърз CSS
- Дори и да сте влезли, все пак можете да запазвате инкогнито.
- Вградени инструменти за визуализация на стойности на CSS за различни параметри като ъгли, цветове, продължителност и т.н.
- Всичко е XHR-ed, така че страницата никога не се опреснява, дори когато запазите.
- Клавишни комбинации в изобилие.
- Целият код е автоматично форматиран (с изключение на markdown).
- Солидна документация от самото начало.
Против
- Интерфейсът е малко поразителен в началото, но свиквате с него.
- Няма функции за управление на ниво проект (все още).
Интеграции на Dabble
Всяка платформа трябва да се интегрира с други услуги и Dabblet не е изключение. Следват някои от интеграциите, които Dabblet предлага:
Google Analytics
Можете лесно да добавите своя проследяващ код на Google Analytics към страниците на Dabble. Това ще ви позволи да проследявате показванията на страници и други статистически данни за вашия Dabblet.
Ubuntu
Dabblet може да се използва за създаване на Ubuntu теми. Можете да създадете нов Dabblet, да добавите CSS и HTML код и да прегледате темата в уеб браузър.
DigitalOcean
Единствена по рода си компания за облачен хостинг предоставя облачни изчислителни услуги на бизнеса, което им позволява да развиват дейността си по-ефективно.
Какво прави Dabblet с него?
Вече можете да създавате, управлявате и разгръщате своите Dabblets Пространства на DigitalOcean.
Това ви позволява да съхранявате всичките си кодови фрагменти на едно място и улеснява споделянето им с други.
Алтернативи за Dabblets
Алтернативите винаги присъстват и в същия дух ето няколко, върху които човек да обмисли, когато става въпрос за Dabblet:
pastebin.com
Програмистите обикновено използват уебсайта за запазване на изходен код или фрагменти от конфигурационни данни. Въпреки това, всеки може да постави произволен текст в предоставеното пространство.
JS Bin
JS Bin е безплатен инструмент за тестване на JavaScript. Резултатът може да бъде споделен чрез кратък URL, след като Javascript бъде въведен в единия панел и HTML в другия. Използвайте меню, което ви позволява да избирате от някои от най-често използваните JS библиотеки.
CssDeck
Този инструмент е чудесен за създаване и обмен на тестови случаи с други, които могат да ви помогнат във вашите начинания по кодиране. С различни опции можете дори да си сътрудничите по проекти незабавно с други програмисти.
Планкър
Plunker е дигитална платформа, където уеб разработчиците могат да правят мозъчна атака, да си сътрудничат и да споделят своите мисли.
Например, можете да започнете с "Здравей, свят!" програмирайте на всеки език и добавете фрагменти от код, намаления и екранни снимки, за да създадете богато изживяване при обучение.
Final Word
В заключение, Dabblet е полезен инструмент за уеб разработчици, особено тези, които търсят начини за бързо и лесно тествайте техния код.
С различните му функции и интеграции е трудно да не се намери приложение за тази платформа.
Опитайте го днес!
Оставете коментар