Hai mai desiderato che ci fosse un'app o un'estensione web che ti permettesse di creare e condividere prototipi di interfaccia utente al volo?
Noi tutti facciamo! Tutti abbiamo idee su come vogliamo che i nostri siti o app appaiano e si sentano.
Quindi, hai ideato un design davvero eccezionale e non riesci a ricordare esattamente come l'hai fatto?
Ora devi trovare un modo per condividerlo. Questo può richiedere giorni, anche settimane, se stai cercando di condividere un design piuttosto complesso.
Non c'è motivo di aspettare per realizzare i prototipi delle tue app web. Creali ora con Dabblet.
Trascina e rilascia gli elementi, lo stile e salvalo. Invialo a un designer per la revisione o semplicemente copialo in una presentazione. Le possibilità sono infinite.
Cos'è Dabblet?
utilizzando dabblet, puoi sperimentare piccoli frammenti di codice CSS e HTML in tempo reale.
Non avrai bisogno di alcun prefisso nel tuo codice CSS quando lo usi. GitHub Gists ti consente di archiviare i tuoi contenuti, pubblicarli su altri siti e condividerli con altri.
Questo è un ottimo modo per condividere frammenti di codice con altri sviluppatori e ottenere feedback.
Come funziona?
Non appena il codice viene digitato, l'output visivo è immediatamente visibile sopra di esso. JavaScript è l'unica esenzione, considerando che sarebbe irritante eseguirlo a ogni sequenza di tasti e potrebbe persino rendere inutilizzabile il browser in determinate situazioni.
Utilizzando l'opzione "Esegui JS" nella scheda JavaScript o la scorciatoia da tastiera (Ctrl + Invio o Cmd + Invio) verrà eseguito JavaScript quando viene eseguito un Dabblet. Il menu delle opzioni ti consente di modificare questo stile.
Come sviluppatore, puoi passare dalla codifica in tutte e tre queste lingue contemporaneamente o vedere il prodotto finito.
Caratteristiche
Di seguito sono elencate le caratteristiche di Dabblet che dovresti conoscere:
Modifica CSS rapida: Puoi aggiungere, modificare e rimuovere rapidamente le proprietà CSS. Le modifiche si rifletteranno sulla pagina in tempo reale.
Evidenziazione della sintassi: Il codice CSS e HTML è evidenziato dalla sintassi, rendendolo facile da leggere e capire. Il codice verrà anche convalidato durante la digitazione. Puoi anche scegliere di nascondere la casella del codice se preferisci.
Completamento automatico: Dabblet offre il completamento automatico per le proprietà e i valori CSS. Questo può essere molto utile quando crei o modifichi fogli di stile.
Fogli di stile CSS pre-costruiti: Puoi accedere a fogli di stile CSS predefiniti da siti Web popolari. Questi possono essere utilizzati per aggiungere rapidamente e facilmente stili al tuo sito web.
Sostegno essenziale: Dabblet supporta GitHub Gists, consentendoti di archiviare e condividere facilmente i frammenti di codice con altri.
Anteprima dal vivo: Puoi vedere i risultati delle modifiche al codice in tempo reale senza ricaricare la pagina. Ad esempio, se modifichi il colore di un testo, vedrai la modifica riflessa sul testo durante la digitazione.
Tasti rapidi: Dabblet ha scorciatoie da tastiera per attività comuni, come aggiungere una nuova regola di stile o commentare.
Modalità di visualizzazione multiple: Dabblet offre più modalità di visualizzazione, che ti consentono di vedere il codice e i risultati fianco a fianco o uno sopra e sotto l'altro.
Vantaggi
- CSS veloce
- Anche se hai effettuato l'accesso, puoi comunque salvare in incognito.
- Visualizzatori di valori CSS in linea per vari parametri come angoli, colori, durata, ecc.
- Tutto è XHR-ed, quindi la pagina non si aggiorna mai, nemmeno quando salvi.
- Scorciatoie da tastiera in abbondanza.
- Tutto il codice è formattato automaticamente (tranne per il markdown).
- Documentazione solida fin dall'inizio.
Svantaggi
- L'interfaccia è un po' opprimente all'inizio, ma ci si abitua.
- Nessuna funzionalità di gestione a livello di progetto (ancora).
Integrazioni Dabblet
Qualsiasi piattaforma deve integrarsi con altri servizi e Dabblet non fa eccezione. Di seguito sono elencate alcune delle integrazioni offerte da Dabblet:
Google Analytics
Puoi aggiungere facilmente il tuo codice di monitoraggio di Google Analytics alle pagine di Dabblet. Ciò ti consentirà di tenere traccia delle visualizzazioni di pagina e di altre statistiche per il tuo Dabblet.
Ubuntu
Dabblet può essere utilizzato per creare temi Ubuntu. Puoi creare un nuovo Dabblet, aggiungere codice CSS e HTML e visualizzare in anteprima il tema in un browser web.
DigitalOcean
Una società di cloud hosting unica nel suo genere fornisce servizi di cloud computing alle aziende, consentendo loro di far crescere le proprie operazioni in modo più efficiente.
Cosa ci fa Dabblet?
Ora puoi creare, gestire e distribuire i tuoi Dabblet Spazi DigitalOcean.
Ciò ti consente di conservare tutti i frammenti di codice in un unico posto e di condividerli facilmente con gli altri.
Alternative per i dilettanti
Le alternative sono sempre presenti e, allo stesso modo, eccone alcune su cui riflettere quando si tratta di Dabblet:
Pastebin.com
I programmatori generalmente utilizzano il sito Web per salvare il codice sorgente o frammenti di dati di configurazione. Tuttavia, chiunque può inserire qualsiasi testo nell'apposito spazio.
JS Bin
JS Bin è uno strumento di test gratuito per JavaScript. Il risultato può essere condiviso tramite un breve URL una volta che Javascript è stato inserito in un riquadro e HTML nell'altro. Utilizza un menu che ti consente di selezionare da alcune delle librerie JS più comunemente utilizzate.
CssDeck
Questo strumento è ottimo per creare e scambiare casi di test con altri che possono aiutarti nelle tue attività di codifica. Con varie opzioni, puoi persino collaborare a progetti istantaneamente con altri programmatori.
Picchiatore
Plunker è una piattaforma digitale in cui gli sviluppatori web possono fare brainstorming, collaborare e condividere i propri pensieri.
Ad esempio, puoi iniziare con un "Hello, world!" programma in qualsiasi lingua e aggiungi frammenti di codice, markdown e schermate per creare una ricca esperienza di apprendimento.
Una Parola Finale
In conclusione, Dabblet è uno strumento utile per gli sviluppatori web, in particolare per coloro che cercano modi per farlo in modo rapido e semplice testare il loro codice.
Con le sue varie funzionalità e integrazioni, è difficile non trovare un uso per questa piattaforma.
Provalo oggi!
Lascia un Commento