Alguna vegada voleu que hi hagi una aplicació web o una extensió que us permeti crear i compartir prototips d'interfície d'usuari sobre la marxa?
Tots ho fem! Tots tenim idees sobre com volem que apareguin i se sentin els nostres llocs o aplicacions.
Així doncs, vau tenir un disseny realment fantàstic i no recordeu exactament com ho vau fer?
Ara has de trobar la manera de compartir-ho. Això pot trigar dies, fins i tot setmanes, si esteu intentant compartir un disseny força complex.
No hi ha cap motiu per esperar per fer els prototips de les vostres aplicacions web. Creeu-los ara amb Dabblet.
Arrossegueu i deixeu anar elements, estilitzar i desar-los. Envieu-lo a un dissenyador perquè la revisi o simplement copieu-lo a una presentació. Les possibilitats són infinites.
Què és Dabblet?
Ús Dabblet, podeu experimentar amb petits fragments de codi CSS i HTML en temps real.
No necessitareu cap prefix al vostre codi CSS quan feu servir això. Les bases de GitHub us permeten emmagatzemar el vostre contingut, publicar-lo en altres llocs i compartir-lo amb altres persones.
Aquesta és una manera fantàstica de compartir fragments de codi amb altres desenvolupadors i obtenir comentaris.
Com funciona?
Tan bon punt s'escriu el codi, la sortida visual és visible a l'instant a sobre. JavaScript és l'única exempció, tenint en compte que seria irritant executar-lo amb cada pulsació de tecla i fins i tot pot fer que el navegador es torni inutilitzable en determinades situacions.
Si feu servir l'opció "Executar JS" a la pestanya JavaScript o la drecera de teclat (Ctrl + Enter o Cmd + Enter) executarà JavaScript quan s'executi un Dabblet. El menú d'opcions us permet modificar aquest estil.
Com a desenvolupador, podeu canviar entre codificar en els tres idiomes simultàniament o veure el producte acabat.
Característiques
A continuació es mostren les característiques de Dabblet que hauríeu de conèixer:
Edició ràpida de CSS: Podeu afegir, editar i eliminar ràpidament propietats CSS. Els canvis es reflectiran a la pàgina en temps real.
Ressaltat de sintaxi: El codi CSS i HTML es destaquen de sintaxi, cosa que facilita la lectura i la comprensió. El codi també es validarà a mesura que escriviu. També podeu optar per amagar el quadre de codi si ho preferiu.
Completament automàtic: Dabblet ofereix l'emplenament automàtic de propietats i valors CSS. Això pot ser molt útil quan creeu o editeu fulls d'estil.
Fulls d'estil CSS predefinits: Podeu accedir a fulls d'estil CSS predefinits des de llocs web populars. Es poden utilitzar per afegir estils de manera ràpida i senzilla al vostre lloc web.
Suport bàsic: Dabblet és compatible amb GitHub Gists, cosa que us permet emmagatzemar i compartir els vostres fragments de codi amb altres persones fàcilment.
Previsualització en viu: Podeu veure els resultats dels canvis al vostre codi en temps real sense tornar a carregar la pàgina. Per exemple, si canvieu el color d'un text, veureu el canvi reflectit al text mentre escriviu.
Dreceres de teclat: Dabblet té dreceres de teclat per a tasques habituals, com ara afegir una nova regla d'estil o comentar.
Múltiples modes de visualització: Dabblet ofereix diversos modes de visualització, que us permeten veure el codi i els resultats al costat de l'altre o per sobre i per sota.
pros
- CSS ràpid
- Encara que hàgiu iniciat la sessió, és possible que encara deseu d'incògnit.
- Visualitzadors de valors CSS en línia per a diversos paràmetres com ara angles, colors, durada, etc.
- Tot està format per XHR, de manera que la pàgina no s'actualitza mai, ni tan sols quan deseu.
- Dreceres de teclat en abundància.
- Tot el codi té un format automàtic (excepte el rebaix).
- Documentació sòlida des del primer moment.
Contres
- La interfície és una mica aclaparadora al principi, però t'hi acostumes.
- No hi ha funcions de gestió a nivell de projecte (encara).
Integracions Dabblet
Qualsevol plataforma s'ha d'integrar amb altres serveis, i Dabblet no és una excepció. Les següents són algunes de les integracions que ofereix Dabblet:
Google Analytics
Podeu afegir fàcilment el vostre codi de seguiment de Google Analytics a les pàgines de Dabblet. Això us permetrà fer un seguiment de les pàgines vistes i altres estadístiques del vostre Dabblet.
Ubuntu
Dabblet es pot utilitzar per crear temes d'Ubuntu. Podeu crear un Dabblet nou, afegir codi CSS i HTML i previsualitzar el tema en un navegador web.
DigitalOcean
Una empresa d'allotjament en núvol única en el seu tipus ofereix serveis de computació en núvol a les empreses, cosa que els permet fer créixer les seves operacions de manera més eficient.
Què en fa Dabblet?
Ara podeu crear, gestionar i desplegar els vostres Dabblets Espais Digitals Oceànics.
Això us permet mantenir tots els vostres fragments de codi en un sol lloc i facilita compartir-los amb altres persones.
Alternatives per a Dabblets
Les alternatives sempre estan presents i, en la mateixa línia, aquí n'hi ha algunes per reflexionar quan es tracta de Dabblet:
Pastebin.com
Els programadors generalment utilitzen el lloc web per desar codi font o fragments de dades de configuració. Tanmateix, qualsevol pot posar qualsevol text a l'espai previst.
JS Bin
JS Bin és una eina de prova gratuïta per a JavaScript. El resultat es pot compartir a través d'una URL curta un cop s'ha introduït Javascript en un panell i HTML a l'altre. Utilitzeu un menú que us permet seleccionar entre algunes de les biblioteques JS més utilitzades.
CssDeck
Aquesta eina és ideal per crear i intercanviar casos de prova amb altres persones que us poden ajudar en els vostres esforços de codificació. Amb diverses opcions, fins i tot podeu col·laborar en projectes de manera instantània amb altres programadors.
Plunker
Plunker és una plataforma digital on els desenvolupadors web poden fer una pluja d'idees, col·laborar i compartir els seus pensaments.
Per exemple, podeu començar amb un "Hola, món!" programa en qualsevol idioma i afegiu fragments de codi, rebaixes i captures de pantalla per crear una experiència d'aprenentatge rica.
Paraula final
En conclusió, Dabblet és una eina útil per als desenvolupadors web, especialment aquells que busquen maneres de fer-ho de manera ràpida i senzilla prova el seu codi.
Amb les seves diverses funcions i integracions, és difícil no trobar un ús per a aquesta plataforma.
Prova-ho avui!
Deixa un comentari